image.png
问题：Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
npm i -D extract-text-webpack-plugin@next
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/760
image.png
问题：[contentHash:8] not implemented in this context: styles.[contentHash:8].css
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/763
config.plugins.push(
new ExtractPlugin('styles.[md5:contenthash:hex:20].css')
)
问题：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
目前，4.0中已经删除CommonsChunkPlugin，替换成了splitChunks，这里有相关介绍内容
解决方案： 去除 new webpack.optimize.CommonsChunkPlugin，修改为
optimization: {
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
}
optimization参数介绍：
optimization: {
splitChunks: {
chunks: "initial", // 必须三选一： "initial" | "all"(默认就是all) | "async"
minSize: 0, // 最小尺寸，默认0
minChunks: 1, // 最小 chunk ，默认1
maxAsyncRequests: 1, // 最大异步请求数， 默认1
maxInitialRequests: 1, // 最大初始化请求书，默认1
name: () => {}, // 名称，此选项课接收 function
cacheGroups: { // 这里开始设置缓存的 chunks
priority: "0", // 缓存组优先级 false | object |
vendor: { // key 为entry中定义的 入口名称
chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步)
test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
name: "vendor", // 要缓存的 分隔出来的 chunk 名称
minSize: 0,
minChunks: 1,
enforce: true,
maxAsyncRequests: 1, // 最大异步请求数， 默认1
maxInitialRequests: 1, // 最大初始化请求书，默认1
reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
}
}
}
},
webpack dev\build 打包配置
const path = require('path');
const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const ExtractPlugin = require('extract-text-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development'
const config = {
mode: 'development',
target: "web",
entry: {
app:path.join(__dirname, "src/index.js"),
},
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist')
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin()
],
optimization: {
runtimeChunk: {
name: "runtime"
},
splitChunks: {
name: "vendor"
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.jsx$/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]'
}
}
}
]
}
}
if (isDev) {
config.module.rules.push({
test: /\.styl/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourseMap: true,
}
},
'stylus-loader'
]
})
config.devtool = '#cheap-module-eval-source-map',
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true
},
hot: true, // 热更新
// historyFallback: {
// }
// open: true
},
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
} else {
config.entry = {
app: path.join(__dirname, "src/index.js"),
vendor: ['vue']
}
config.output.filename = '[name].[chunkhash:8].js'
config.module.rules.push(
{
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourseMap: true,
}
},
'stylus-loader'
]
})
}
)
config.plugins.push(
new ExtractPlugin('styles.[md5:contenthash:hex:20].css'),
)
}
module.exports = config
