我一直在阅读和关注教程，但我被困住了。我能够完成教程中列出的内容，但不能将它们组合在一起。
我想编写一个可以执行以下操作的配置文件：
编译/透明文件，实时/热重新加载，哈希文件名，缩小和源图。
现在我正在考虑放弃Webpack，只使用它进行转换并在Gulpjs中做所有事情。
粗体的东西也是我遇到很多麻烦的地方。现有的解决方案包括生成JSON文件，并根据请求读取它们（inefficent！），生成完整的html文件并注入它们（打破许多流程，如果需要，可以使用特殊属性修改脚本标记，它们会被覆盖）。
答案 0 :(得分：2)
没有一个适合所有人！
许多配置不一定绑定到webpack，它们可以在scripts的{{1}}条目中找到，或者只驻留在package.json的{{1}}中。当然，你可以在webpack中配置关于ES6的所有内容，但是你也可以只将它们放在package.json中，所以它更像是一种风味/团队惯例。为简单起见，我只想分享一个可行的解决方案：
presets用于Sass / Scss，JSX / ES6转换.babelrc loaders，因为您可能不希望生产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'
})
})
}
css，但我仍然会在开发中使用它们。
ExtractTextPlugin和inline个插件甚至比HotModuleReplacement页面更好，它只会重新加载应用程序的更改部分（想想Ajax），这有助于更快地迭代，更重要的是，它可以帮助您保留状态您的应用，这对于react-hot-loader，Auto Refresh/Reload等有用的大型SPA非常重要。
state management由于您不想 webpack-dev-server ，请提供 webpack-dev-middleware 和 webpack-hot-middleware ，它们将在您的time travel debugging开发中使用：
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()
])
}
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))
来散列文件名并自动更新推荐的网址。Code Splitting要删除旧的散列文件，只需在package.json中使用简单的脚本
HtmlWebpackPluginif (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'
})
})
}
，"scripts": {
"build": "rm -rf public/** && NODE_ENV=production webpack --progress --hide-modules"
}
个插件来缩小和生成源地图UglifyJsPlugin“总结”LoaderOptionsPlugin可能如下所示：
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'
}
仅供参考，快乐调整！
答案 1 :(得分：0)