一、Node版本更新
node.js >= 8.9.4
【🎈 原则上版本 >=6.11.5即可，但考虑到最佳的es6特性实现，版本最好可以升级到 >= V8.9.4 】
二、npm更新
- webpack 升级 (npm i webpack@4 -D)
- webpack-cli
- webpack-dev-server@3
- html-webpack-plugin (npm i html-webpack-plugin@3.2.0 -D)
- babel-loader(npm i babel-loader@7 -D)
- vue-loader(npm i vue-loader@15 -D)
- style-loader 最新
- css-loader 最新
- vue-style-loader 最新
(如果有sass-loader\less-loader,也更新最新） - url-loader@1
- file-loader@1
- ts-loader 更新最新
- extract-text-webpack-plugin的beta包 (npm i extract-text-webpack-plugin@next -D) 或者 mini-css-extract-plugin
三、配置更改
-
更加快捷的mode模式优化配置文件
webpack4 提供了development 和 production2个mode值，默认是 production.
有2种配置方法：配置文件中增加mode属性或者从启动命令中参数传递
// 配置法1：webpack.dev.config.js 配置文件
module.exports = {
mode: 'development'
}
// 配置法2：package.json
// 以前的写法
"dev" : "set NODE_ENV=development ..."
// window下直接set会不支持,需要npm i cross-env
"dev"： “cross-env NODE_ENV=development ...”
// webpack4
"dev": "webpack --mode development"
"build": "webpack --mode production"
设置了mode,运行时会自动将process.env.NODE_ENV的值设为development，无需原有的手动设置或者webpack.DefinePlugin
-
移除loaders,改rules
-
vue-loader
前面有讲到vue-loader升级，这边
1、v15 需要以plugin方式添加到webpack配置中
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// plugin.push(VueLoaderPlugin )
module.exports = {
plugins: [
new VueLoaderPlugin()
]
}
2、v15版本之后（使用了不同的策略 推导.vue文件中各个语言块使用的loader,将各个语言块视为独立的文件，使用webpack中配置了规则的loader处理，由此带来的配置变化就是针对样式处理，webpack.rules中必须显示提供对应loader处理的规则），所以原有vue-loader配置中内联传入的样式相关的loader可以去除
test: /\.vue$/,
loader: 'vue-loader',
options: {
// v15+版本不再需要内联的cssloader配置
// 如果不去掉会报错？？（我的项目未去掉也没报错,emmm...😣）
}
}
3、鉴于第2点的推导变化，<script><script/>标签内的js代码将被视为独立的js文件并根据webpack配置使用babel-loader转译；因此，如果项目配置babel-loader时使用exclude：/node_modules/排除了依赖包中代码的转译，并且导入了/node_modules/中的.vue文件，<script>部分将不会被转译，故需要将.vue文件加入排除名单中
{
test: /\.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) && !/\.vue\.js/.test(file)
)
}
📌 其他变更可参考vue-loader官方文档 ：https://vue-loader.vuejs.org/migrating
-
新的工具代码抽取工具optimization.SplitChunksPlugin(代替CommonChunkPlugin)
-
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() ] -
splitChunks&runtimeChunk
根据不同的策略来分割打包出来的bundle，具体：webpack splitChunks & runtimeChunk
（🎈这边配置的chunk记得在HtmlWebpackPlugin中的chunks的对应环境中添上，否则页面不会显示，即不配置页面不会引入这些chunk）
代码分割提取优化之处：webpack CommonsChunkPlugin 和 SplitChunksPlugin 思路
-
minimize
-
CSS文件提取插件
mini-css-extract-plugin 替代 extract-text-webpack-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin') const isDEV = process.env.NODE_ENV === 'development' module.exports = { ... plugins: [ new MiniCssExtractPlugin({ filename: isDEV ? '[name].css':'[name].[contenthash:8].css' , }), ], module: { rules: [ { test: /\.css$/, use: [ isDEV ?'style-loader': MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ] }, }
webpack4：提取、压缩css(公共部分)、消除多余css
五、项目遇到的问题及修改
1、用import()懒加载组件 报错
解决方法： 安装dynamic-import-webpack的npm包，并在.babelrc配置文件中引入该插件
// .babelrc
"plugins": [
"dynamic-import-webpack"
]
2、autoprefixer-loader官网标注deprecated废弃了
autoprefixer: 自动添加css前缀（写css样式时，有时需要加样式前缀以兼容不同的浏览器。手动添加会写较多的重复代码，降低开发效率）
原有项目：autoprefixer-loader
现有方案 ：postcss-loader + autoprefxer
// 1、根目录创键一个postcss.config.js
module.exports= {
plugins: [
require('autoprefixer')({
'browsers': [
'defaults',
'defaults',
'last 2 versions',
'> 1%',
'iOS 7',
'last 3 iOS versions'
]
})
]
}
// 2、各种css对应loader下加入'postcss-loader'
3、多入口静态static文件夹（图片,js等）的处理
每个入口下有对应的static文件夹，不做处理，将访问不到该文件夹，这边通过CopyWebpackPlugin插件拷贝文件
function resolve(file) {
return path.resolve(__dirname,'..',file)
}
// 将多入口的相关路径写成对象
const ENTRIES = {
entryA: {
path: './websites/entryA/main', // 入口js
template:resolve( './websites/entryA/template.ejs'), // 模板
staticPath:resolve( './websites/entryA/static') // 静态文件存放路径
},
...
}
// helper.js
// entries 是所有的入口js, 即[entryA,entryB,.....]
function _generateStaticPlugins(entries){
return Object.keys(entries).map(name => {
let entry = ENTRIES[name]
return new CopyWebpackPlugin([
{
from: entry.staticPath,
to: 'static',
ignore: ['.*']
}
])
})
}
4、公共样式提取缺少配置-导致样式混乱
问题： a入口单独引用的全局样式 影响了其他入口的页面样式
原因： 命名不对 + 公共样式提取配置漏配
// webpack.base.config.js
styles: {
name: 'styles',
test: /\.(sa|sc|le|c)ss$/,
chunks: 'all',
enforce: true
}
默认minChunks是1 ，忘记配置，导致a入口单独引用的全局样式成公共样式，被每个入口引用，加上该全局样式用了!important,优先级就大于该页面的scoped 样式
赞赞哇.png
网友评论