webpack-3x-到webpack-4x-踩坑记录

从 jspang 的《Webpack3.X 版 成神之路》webpack 入门（http://jspang.com/posts/2017/…）
如今升级到 4x，菜鸟独自踩坑一把辛酸泪

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"