1 安装 webpck 4， 根据提示安装新的 版本,
涉及插件
[cc lang=”json”]”vue-loader”: “^15.0.10”,
“vue-style-loader”: “^4.1.0”,
“vue-template-compiler”: “^2.5.16”,
“copy-webpack-plugin”: “^4.0.1”,
“extract-text-webpack-plugin”: “^4.0.0-beta.0”,
“html-webpack-plugin”: “^3.1.0”,
“optimize-css-assets-webpack-plugin”: “^4.0.0”,
“webpack-bundle-analyzer”: “^2.11.1”,
“webpack-dev-middleware”: “^3.1.2”,
“webpack-dev-server”: “^3.1.3”,
“webpack-merge”: “^4.1.0”
[/cc]
2 更新各种loader
mini-css-extract-plugin
这个插件将css按模块化解压到单独的文件中，为每个包含css的js文件创键一个css文件。
style-loader 是将css文件以行内样式style的标签写入打包后的html页面，mini-css-extract-plugin是直接link方式引入进去
extract-text-webpack-plugin
根据创键实例、或者配置多个入口chunk来的，比如配置了一个入口文件，最终所有的css都会提取在一个样式文件中；如果n个入口（即创键了n个实例），则会生成多个css文件
3 webpack.optimize.CommonsChunkPlugin 提取公共代码 改为 optimization.splitChunks
4 vue-loader
*需要把 VueLoaderPlugin = require(‘vue-loader/lib/plugin’) 添加到plugin 中
*v15版本之后（使用了不同的策略 推导.vue文件中各个语言块使用的loader,将各个语言块视为独立的文件，使用webpack中配置了规则的loader处理，由此带来的配置变化就是针对样式处理，webpack.rules中必须显示提供对应loader处理的规则），所以原有vue-loader配置中内联传入的样式相关的loader可以去除
[cc lang=”js”]test: /\.vue$/,
loader: ‘vue-loader’,
options: {
// v15+版本不再需要内联的cssloader配置
// 如果不去掉会报错？？（我的项目未去掉也没报错,emmm…?）
}
}[/cc]
*鉴于第2点的推导变化，<script><script/>标签内的js代码将被视为独立的js文件并根据webpack配置使用babel-loader转译；因此，如果项目配置babel-loader时使用exclude：/node_modules/排除了依赖包中代码的转译，并且导入了/node_modules/中的.vue文件，<script>部分将不会被转译，故需要将.vue文件加入排除名单中
[cc lang=”js”]{
test: /\.js$/,
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
),
loader:’babel-loader’
},[/cc]
5 package.json
// window下直接set会不支持,需要npm i cross-env
“dev”： “cross-env NODE_ENV=development …”
// webpack4
webpack运行时还会根据mode设置一个全局变量process.env.NODE_ENV,这里的process.env.NODE_ENV不是node中的环境变量,而是webpack.DefinePlugin中定义的全局变量,允许你根据不同的环境执行不同的代码.
“dev”: “webpack –mode development”
“build”: “webpack –mode production”
6. minimize
默认为true,效果就是压缩js代码（代替以前的webpack.optimize.UglifyJsPlugin）
minimizer
可以自定义UglifyJsPlugin和一些配置，默认的压缩为uglifyjs-webpack-plugin 【当使用了OptimizeCSSAssetsPlugin插件，内置的uglifyjs-webpack-plugin插件会失效，这边需要重新配置下UglifyJsPlugin】
// 新增css的压缩
minimizer：
mode === “development”
? []
: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: mode === “development”
}),
new OptimizeCSSAssetsPlugin()
]
7 CSS文件提取插件
mini-css-extract-plugin 替代 extract-text-webpack-plugin
[cc lang=”js”]
//webpack 文件配置
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const devMode = process.env.NODE_ENV !== ‘production’;
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? ‘[name].css’ : ‘[name].[hash].css’,
chunkFilename: devMode ? ‘[id].css’ : ‘[id].[hash].css’,
}),
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === ‘development’,
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
‘css-loader’,
‘postcss-loader’,
‘sass-loader’,
],
},
],
},
};[/cc]
[cc lang=”js”]
//Extracting all CSS in a single file 生成css 到一个文件
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: ‘styles’,
test: /\.css$/,
chunks: ‘all’,
enforce: true,
},
},
},
},[/cc]
根据 entry point 或 chunk 打包不同css 文件 参考 https://www.npmjs.com/package/mini-css-extract-plugin
!!!优化css的处理器
[cc lang=”js”] new OptimizeCSSAssetsPlugin ({
// 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件
assetNameRegExp: /\.(sa|sc|c)ss$/g,
// 指定一个优化css的处理器，默认cssnano
cssProcessor: require(‘cssnano’),
cssProcessorPluginOptions: {
preset: [ ‘default’, {
discardComments: { removeAll: true}, //对注释的处理
normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码
}]
},
canPrint: true // 是否打印编译过程中的日志
})[/cc]
!! 消除未使用的CSS
1、安装
npm i purify-webpack purify-css -D
2、引入及配置
[cc lang=”js”]const glob = require(‘glob’)
const PurifyCssPlugin = require(‘purifycss-webpack’)
plugins: [
new PurifyCssPlugin ({
paths: glob.sync(path.join(__dirname, ‘/*.html’))
})
][/cc]
！！ ！1. 开发模式要用到 new webpack.HotModuleReplacementPlugin()
2. 开发模式 配置里不能用 contentHash， chunkHash， 直接用hash 或者不用
3. 大量输出日志处理
[cc lang=”js”]stats: {
children: false
},[/cc]
4