持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
背景
我们知道webpack的作用就是个模块编译器，它就是个工具，
比如sass,hbs不能直接运行在浏览器中，Vue，jsx也不能直接放上去，
这时候就需要个工具帮助编译，这个工具就叫构建工具，
而webpack就是这种工具中的一种，它可以把sass转换成css,让js兼容低版本容器，还可以进行图片的压缩优化等。
我们先安装一下webpack以及webpack-cli命令行工具,安装命令如下，推荐局部安装：
npm init -y # 初始化npm配置⽂件
npm install --save-dev webpack # 安装核⼼库
npm install --save-dev webpack-cli # 安装命令⾏⼯具
注意：由于webpack最新版本可能不太稳定，所以我们还是先安装比较新的稳定版本4.x，用如下命令安装指定版本
npm i -D webpack@4.44.0
//安装指定版本
npm i -D webpack@<version>
安装webpack以及webpack-cli命令行工具等之后，出现如下的页面列表：
package.json
如果我们项目初始化时没有执行，npm init -y 这个命令，就不会有package.json这个文件，这个文件是什么呢？
是项目安装依赖等配置的文件，里面有对整个项目描述，项目名称，版本等的说明，
管理你的本地安装的npm包，用于定义项目模板,记录模板信息，是个json类型的文件，
搭建项目之初，可手动创建，也可通过npm init命令生成。
启动webpack
这块我有篇文章已经说过了，就不在多做阐述，链接在这 webpack的简介
其中重要的一点，执行构建2种方式：
//npx方式
npx webpack
//npm script
npm run test
npx是自带的方式，npm方式是package.json文件中配置的，如下:
"scripts": {
"test": "webpack"
},
此上命令执行完后，会出现一个dist打包文件，如下：
mode
注意点：执行构建成功后，会有一处警告：
说是 没有设置mode的值，mode是打包模式的意思，没有设置值的情况下webapck默认的mode的值是production
生产模式的特点：打包的文件体积小，且不易于阅读，比如代码进行了压缩，
此项目dist/main.js出口文件代码就是压缩代码，如下：
生产模式下，信息那块的chunks名称都没有，所以对开发环境下不太方便，我们现在是在开发环境，
所以设置为开发模式，在webpack.config.js里设置，如下：
再执行构建，再看看:
警告没有了，并且信息那块的chunks也有文件名了。再看看出口文件dist/main.js,如下：
代码是非压缩的，可阅读的。
开发模式的特点：打包体积偏大，易于阅读，代码不压缩。
mode有2个值：
- development (开发)
- production(生产)
webpack.config.js
webapck的默认配置文件，比如里面配置出口入口文件，mode等，
默认配置文件名也可以改，可以不叫webpack.config.js，在packge.json里面scripts里面的dev : webpack---->(改成) webpack --config ./qianchang.config.js ，
然后在 qianchang.config.js里面进行配置就可以生效。
不指定 --config 以及后面那新地址名，那就是默认的这个地址webpack.config.js
以上意思是：dev启动webpack--config是指定哪份配置,指定配置文件是./qianchang.config.js ，还可以用npx webpack --config /qianchang.config.js 也可以重新定义配置文件地址以及名。
webpack.config.js：
