webpack 3x 到webpack 4x 踩坑记录

从jspang的《Webpack3.X版 成神之路》webpack入门（http://jspang.com/posts/2017/...）
如今升级到4x，菜鸟独自踩坑一把辛酸泪，webpack4主要教程参考https://blog.51cto.com/140471...

1.安装webpack

webpack 4x webpack和webpack-cli要分开安装，不再一次安装
只在本地项目安装了webpack和webpack-cli

npm install webpack --save-dev
npm install webpack-cli --save-dev

查看webpack版本时用npx webpack -v
想一步到位，最好再全局安装一次

npm install webpack -g
npm install webpack-cli -g

2.Webpack打包命令更改

webpack 3x打包命令

webpack {entry file} {destination for bundled file}

{entery file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。

webpack 4x打包命令更加严格
严格区分开发与生产环境，mode可以指定 production 或 development，不指定默认为 production。

webpack {entry file} --output-filename {destination for bundled file} --output-path --mode development

简写：webpack {entry file} -o {destination for bundled file} --mode development

同样我们可以在package.json里配置，简化命令

"dev": "webpack --mode development",
"build": "webpack --mode production"

3.postcss-loader autoprefixer配置后不起作用

具体安装过程看jspang的博客http://jspang.com/posts/2017/... 第十三节 自动处理CSS3属性前缀

都配置之后发现不起作用
查了之后发现autoprefixer需要配置browsers参数兼容版本，但配置之后报错

autoprefixer引用更改，语法改为overrideBrowserslist

更改前：
module.exports = {
    plugins: [
        require('autoprefixer')({ browsers: ["last 5 versions"]})
    ]
}

更改后：
module.exports = {
    plugins: [
        require('autoprefixer')({ overrideBrowserslist: ["last 5 versions"]})
    ]
}

详细兼容见http://www.ydcss.com/archives/94，https://segmentfault.com/a/1190000008030425