javascript - Webpack 需要什么配置才能完成这些事情？

Question

我一直在阅读并遵循教程，但我陷入困境。我能够完成教程中列出的事情，但无法将它们组合在一起。

我想编写一个可以执行以下操作的配置文件:

1. 将 Sass/Scss 文件编译为 CSS 文件并放入公共(public)文件夹中，而不是将它们内联到任何地方。
2. 将 JSX/Es6 文件转换为一个文件(我得到了这个)。
3. 当 Css 或 Html 更改时自动刷新/加载页面。
4. 当 Javascript 更改或 React 组件等时自动刷新/加载页面。
5. 加上通过我自己的 Nodejs Express 服务器运行，而不是使用 webpack 开发服务器，我想避免同时运行多个进程。他们让事情变得困难。
6. 每当 Css 或 js 文件发生更改时，将哈希值放入文件名中以进行缓存清除。
7. ...与上一步相关，检查所有模板并更新生成它们的所有网址。
8. ...删除旧的哈希文件。
9. 缩小并生成源映射。

所以编译/转换文件、实时/热重载、哈希文件名、缩小和源映射。

现在我正在考虑放弃 Webpack，只用它来进行转译，一切都在 Gulpjs 中完成。

粗体部分也是我遇到很多麻烦的地方。现有的解决方案包括生成 JSON 文件，并根据请求读取它们(效率低下!)，生成完整的 html 文件并注入(inject)它们(破坏许多流程，并且如果需要，无法修改具有特殊属性的脚本标记，它们会被重写)。

Answer 1

没有一种方法适合所有人!

许多配置不一定绑定(bind)到 webpack，它们可以在 package.json 的 scripts 条目中找到，或者只是驻留在 presets 中.babelrc 的 >。当然，你可以在 webpack 中配置有关 ES6 的所有内容，但你也只能将它们放在 package.json 中，所以这更像是一种风格/团队约定的事情。为了简单起见，我只分享一个可行的解决方案:

您需要用于 Sass/Scss、JSX/ES6 转换的加载器

exports.module = {
    rules: [
        {
            test: /\.scss$/,
            use: isProd
                ? ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
                : ['style-loader', 'css-loader', 'sass-loader']
        },
        {
            test: /\.js|jsx$/,
            use:  'babel-loader',
            exclude: /node_modules/
        }
    ]
}

if (isProd) {
    module.exports.plugins = (module.exports.plugins || []).concat([
        new ExtractTextPlugin({
            filename: '[name].[contenthash].css'
        })
    })  
}

ExtractTextPlugin 在这里使用，因为您可能不希望在生产中使用 inline css，但我仍然会在开发中使用它们。

您需要 HotModuleReplacement 和 react-hot-loader 插件来进行代码热重载

甚至比自动刷新/重新加载页面更好，它只会重新加载应用程序的更改部分(想想 Ajax)，这有助于更快地迭代，更重要的是，它可以帮助您保留应用的状态，这对于大型 SPA 相当重要，其中状态管理、时间旅行调试等可能很有用。

if (isDev) {
    module.exports.entry.app = [
        'webpack-hot-middleware/client',
        'react-hot-loader/patch'
    ].concat(module.exports.entry.app)
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.HotModuleReplacementPlugin()
    ])
}

由于您不需要webpack-dev-server，请尝试一下webpack-dev-middleware和webpack-hot-middleware ，它们将在开发中的 server.js 中使用:

// compile your bundle.js on the fly (in memory serve)
app.use(require("webpack-dev-middleware")(compiler, {
  noInfo: true,
  publicPath: "/"
}))

// notify the browser client updated bundle is ready
app.use(require("webpack-hot-middleware")(compiler))

您需要代码拆分和HtmlWebpackPlugin来哈希文件名并自动更新引用的网址。

if (isProd) {
    module.exports.output = Object.assign({}, module.exports.output, {
        filename: '[name].[chunkhash].js',
        chunkFilename: '[id].[chunkhash].js'
    })
    module.exports.plugins = (module.exports.plugins || []).concat([
        new HtmlWebpackPlugin({
            template: 'index.ejs',
            inject: true,
            chunksSortMode: 'dependency'
        })
    })
}

要删除旧的散列文件，只需 package.json 中的简单脚本

"scripts": {
  "build": "rm -rf public/** && NODE_ENV=production webpack --progress --hide-modules"
}

您需要 UglifyJsPlugin、LoaderOptionsPlugin 插件来缩小和生成源 map

if (isProd) {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        })
    ])
} else {
    module.exports.devtool = '#eval-source-map'
}

“总结”webpack.config.js 可能如下所示:

const path = require('path')
const resolve = p => path.resolve(__dirname, p)
const webpack = require('webpack')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
    entry: {
        app: [
            resolve('src/js/main.js')
        ]
    },
    output: {
        path: resolve('public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: isProd
                    ? ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                    : ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.js|jsx$/,
                use:  'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

if (isProd) {
    module.exports.devtool = '#source-map'
    module.exports.output = Object.assign({}, module.exports.output, {
        filename: '[name].[chunkhash].js',
        chunkFilename: '[id].[chunkhash].js'
    })
    module.exports.plugins = (module.exports.plugins || []).concat([
        new ExtractTextPlugin({
            filename: '[name].[contenthash].css'
        }),
        new HtmlWebpackPlugin({
            template: 'index.ejs',
            inject: true,
            chunksSortMode: 'dependency'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        })
    ])
} else {
    module.exports.entry.app = [
        'webpack-hot-middleware/client',
        'react-hot-loader/patch'
    ].concat(module.exports.entry.app)
    module.exports.devtool = '#eval-source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.HotModuleReplacementPlugin()
    ])
}

仅供引用，祝调整愉快!

_{如果您想要快速演示:https://github.com/lxynox/so-example-webpack}