二、Webpack 初体验

2.1 初始化配置

1. 初始化 package.json：npm init

2. 下载安装webpack：(webpack4以上的版本需要全局/本地都安装webpack-cli)

   全局安装：cnpm i webpack webpack-cli -g

   本地安装：cnpm i webpack webpack-cli -D

2.2 编译打包应用

创建 src 下的 js 等文件后，不需要配置 webpack.config.js 文件，在命令行就可以编译打包。

指令：

• 开发环境：webpack ./src/index.js -o ./build/built.js --mode=development

  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是开发环境

• 生产环境：webpack ./src/index.js -o ./build/built.js --mode=production

  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是生产环境

结论：

1. webpack 本身能处理 js/json 资源，不能处理 css/img 等其他资源

2. 生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化，但是不能处理 ES6 的基本语法转化为 ES5（需要借助 loader）

3. 生产环境比开发环境多一个压缩 js 代码