从 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"