webpack4出来有一段时间了,现在3升级到4
运行
npm i npm-check -g
npm-check -u
选择要更新的依赖,loader之类都更新到最新
npm i webpack-cli --save-dev
dev和prod 添加不同mode
utils.js css 预编译处理 前缀于 loder配置, 生产打包使用MiniCssExtractPlugin
exports.cssLoaders = function (options, booLocal) {
options = options || {};
var cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
modules: true,
localIdentName: '[local]',
importLoaders: 1,
}
};
var postcssLoader = {
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 5 versions']
})
]
}
};
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
var loaders = [cssLoader, postcssLoader];
if (loader) {
let option = {
...loaderOptions,
sourceMap: options.sourceMap,
};
if (loader === 'less') {
option['javascriptEnabled'] = true
}
loaders.push({
loader: loader + '-loader',
options: option
});
}
// Extract CSS when that option is specified
//(which is the case during production build)
if (options.extract) {
if (process.env.NODE_ENV === 'production') {
return [MiniCssExtractPlugin.loader].concat(loaders);
} else {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'react-style-loader' // react-style-loader
});
}
} else {
return ['react-style-loader'].concat(loaders);
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders('postcss'),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus'),
};
};
commonschunkplugin 替换为 optimization.splitChunks
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 5,
name: false,
cacheGroups: {
polyfill: {
test: /[\\/]node_modules[\\/](core-js|raf|@babel|babel)[\\/]/,
name: 'polyfill',
priority: 20,
...commonOptions
},
react: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'react',
priority: 19,
...commonOptions
},
router: {
test: /[\\/]node_modules[\\/](react-router-dom)[\\/]/,
name: 'router',
priority: 18,
...commonOptions
},
redux: {
test: /[\\/]node_modules[\\/](react-redux|redux|redux-persist|redux-saga)[\\/]/,
name: 'redux',
priority: 17,
...commonOptions
},
design: {
test: /[\\/]node_modules[\\/](@ant-design)[\\/]/,
name: 'design',
priority: 16,
...commonOptions
},
}
}
},
webpack.dev.conf.js 删除
maxInitialRequests配置的数量要大于cacheGroups 数量 不然cacheGroups 就会 合并到入口文件
webpack.prod.conf.js中
MiniCssExtractPlugin替换 ExtractTextPlugin
webpack.prod.conf.js 删除 以下配置
UglifyJsPlugin 加入
optimization: {
minimizer: {
new UglifyJsPlugin()
}
}
npm run build 就看到了