一.
新建一个文件夹，进入，打开Git。
二.
初始化
npm init -y
三.
安装webpack和webpack-cli到开发依赖
npm i webpack --save-dev
npm i webpack-cli --save-dev
四.
新建一个目录src，里面有三个js文件，hello.js，world.js，index.js。
五.
打开配置文件package.json文件,然后在scripts字段添加:
"build":"webpack"
六.
执行npm run build ,可以看到执行结果：
可以看到多了一个文件夹dist。打开dist/main.js,里面的代码的确是被压缩的,说明是生产环境打包。
七.
package.json中的script字段改为如下所示：
"scripts":{
"dev":"webpack --mode develoment",
"build":"webpack --mode production"
}
这时候执行npm run dev,这次没有被压缩也没有提示了，因为develoment对应着开发环境，是为我们开发时所用的模式。
Webpack的打包环境有production和development两种,分别对应生产环境和开发环境，我们打包上线的时候用生产环境，开发的时候用开发环境。
总结：
1.webpack默认的入口文件是src/index.js
扫描二维码关注公众号，回复：
10111882 查看本文章
index.js重命名为l.js，修改默认打包的入口文件
“scripts”:{
"dev":"webpack --mode develoment ./src/l.js",
"build":"webpack --mode production ./src/l.js"
},
这时候运行npm run dev就是将./src/l.js当做入口文件打包了。
2.webpack的默认输出目录是dist/main.js
如果希望修改输出目录就要用到命令–output
“scripts”:{
“dev”:“webpack --mode development --output ./output/main.js”,
“build”:“webpack --mode production --output ./output/main.js”
}
这时候再执行npm run build,则webpack会将打包后的文件输出到output/main.js而不是dist/mian.js。
