偷的，偷偷的，webpack经稳定版本不知道什么时候已更新到4，甚至v5也已经出来了。
更新内容有：
1. 模式(mode)
查看原文|编辑此页
增加了模式区分 （development, production）
--webpack --mode development/production 进行模式切换
-- development 开发者模式 打包默认不压缩代码
-- production 生产者模式 上线时使用，压缩代码。 默认是这个模式
提供 mode 配置选项，告知 webpack 使用相应环境的内置优化。
development模式下，将侧重于功能调试和优化开发体验，包含如下内容：
浏览器调试工具
开发阶段的详细错误日志和提示
快速和优化的增量构建机制
production模式下，将侧重于模块体积优化和线上部署，包含如下内容：
开启所有的优化代码
更小的bundle大小
去除掉只在开发阶段运行的代码
Scope hoisting和Tree-shaking
自动启用uglifyjs对代码进行压缩
2. optimization
移除了commonchunk插件，改用了optimization属性进行更加灵活的配置
ExtractTextWebpackPlugin调整，建议选用新的CSS文件提取插件mini-css-extract-plugin
3. 要安装webpack-cli;
webpack不在单独使用，需要webpack-cli
-- 全局安装 npm install webpack webpack-cli -g -D
-- 局部安装 npm install webpack webpack-cli -D
4,. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
. 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
// make sure to include the plugin for the magic new VueLoaderPlugin() ],
5. Vue Loader v15 不再默认应用 PostCSS 变换。你需要通过 postcss-loader 使用 PostCSS。
而且postcss-loader跟新到v2以上后，需要新增个文件postcss-config.js才可以，不然css或less文件解析会出错。文件内容如下：
module.exports = {
// parser:'sugarss',
plugins: {
'autoprefixer': {browsers:'last 5 version'}
}}
其中 SugarSS is whitespace sensitive convenience syntax for CSS, if you intend to use it use the .sss extension instead and a {Function} in postcss.config.js;
如果空格使用不当，编译会报错：
less (1:12) Unnecessary curly bracket
6，babel 升级
https://www.cnblogs.com/chyingp/p/understanding-babel-preset-env.html
但是一直运行出错，识别不了routes里的按需加载用的import
改成以下OK了：
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'js'),
path.resolve(__dirname, 'node_modules/iview')
],
exclude: [
path.resolve(__dirname, 'js/lib')
],
use: [{
loader: 'babel-loader',
options: {//如果有这个设置则不用再添加.babelrc文件进行配置
"babelrc": false,// 不采用.babelrc的配置
"plugins": [
"dynamic-import-webpack"
] }
}]
}
7, 插件clean-webpack-plugin升级后报错
webpack打包报错：clean-webpack-plugin only accepts an options object
显然是因为版本升级导致的传参不一致，最新版本的参数仅一个对象。
改成以下方式，路径删除：
newCleanWebpackPlugin(['build/*.*'], {
root: __dirname,
verbose:true,
dry:false
})
ps： 对应的其他插件的版本都要相应更新，使用npm audit fix --force
网友评论