Javascript Webpack执行这些操作需要什么配置？

我一直在阅读和遵循教程，但我被卡住了。我能够完成教程中列出的事情，但不能将它们结合在一起

我想编写一个配置文件来完成以下任务：

将Sass/Scss文件编译成CSS文件并放入公用文件夹中，而不是在任何地方内联它们

将JSX/Es6文件转换为一个文件（我得到了这个）

Css或Html更改时自动刷新/加载页面

当Javascript更改或响应组件等时自动刷新/加载页面

另外，通过我自己的Nodejs Express服务器运行，而不是使用webpack dev服务器，我希望避免同时运行多个进程。他们使事情变得困难

每当Css或js文件发生更改时，将哈希值放入文件名中以进行缓存破坏。

…与上一步相关，检查所有模板并更新生成的URL。

…删除旧的哈希文件。

缩小并生成源地图

因此，编译/传输文件、实时/热重新加载、哈希文件名、缩小和源映射

现在我正在考虑放弃Webpack，只使用它进行传输，并用Gulpjs做所有事情

粗体字的东西也是我遇到很多麻烦的地方。现有的解决方案包括生成JSON文件，并根据请求读取它们（效率低下！），生成完整的html文件并注入它们（中断许多流，加上无法使用特殊属性修改脚本标记，如果需要，它们会被重写）

将样式编译为单个文件-使用

将ES6/JSX传输到ES5-您需要像

检查点4

热重新加载-因为您提到您正在使用React，所以您可以使用

通过自己的node.js服务器运行-使用

文件哈希-检查此项

与6相同

手动或通过一些cron作业来完成

缩小，生成源地图-检查生产版本

将样式编译为单个文件-使用

将ES6/JSX传输到ES5-您需要像

检查点4

热重新加载-因为您提到您正在使用React，所以您可以使用

通过自己的node.js服务器运行-使用

文件哈希-检查此项

与6相同

手动或通过一些cron作业来完成

缩小，生成源地图-检查生产版本

---

没有适合所有人的

许多配置不一定绑定到Web包，它们可以在

包.json的
脚本
条目中找到，或者只驻留在
的
预设
中。当然，您可以在webpack中配置关于ES6的所有内容，但也只能将它们放在package.json中，因此这更像是一种风格/团队惯例。为了简单起见，我只想分享一个可行的解决方案：

对于Sass/Scss、JSX/ES6转换，您需要
加载程序

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，它们将用于开发中的
服务器.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
来散列文件名并自动更新引用的URL。
要删除旧的散列文件，只需使用package.json中的简单脚本即可

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

您需要
UglifyJsPlugin
，
LoaderOptionsPlugin
插件来缩小和生成源地图
“总结”
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()
    ])
}

仅供参考，快乐调整

如果您想要快速演示：
没有适合所有人的

许多配置不一定绑定到Web包，它们可以在
包.json的
脚本
条目中找到，或者只驻留在
的
预设
中。当然，您可以在webpack中配置关于ES6的所有内容，但也只能将它们放在package.json中，因此这更像是一种风格/团队惯例。为了简单起见，我只想分享一个可行的解决方案：

对于Sass/Scss、JSX/ES6转换，您需要
加载程序

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，它们将用于开发中的
服务器.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
来散列文件名并自动更新引用的URL。
要删除旧的散列文件，只需使用package.json中的简单脚本即可

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

您需要
UglifyJsPlugin
，
LoaderOptionsPlugin
插件来缩小