1. webpack 优势

1. webpack-dev-server 搭建本地环境，进行热更新；
2. 预处理:包可以帮我们处理 es6 sass less ts语法，解析成浏览器可以识别的 js 文件；
3. 图片添加hash 方便cdn缓存；
4. 自动处理css3属性前缀；
5. 单文件 多文件打包；
6. 按需加载；
7. 模块化打包import export require
8. 压缩js

2. 能做什么：

1. 语法转换

• less/sass转换成css
• ES6转换成ES5

1. html/css/js 代码压缩合并（打包）
2. webpack在开发期间提供一个开发环境

• 自动打开浏览器
• 热更新
• 项目一般先打包再上线

3. Webpack4 与 Webpack3 版本的区别

1. 增加了 mode 属性
2. webpack4 在 loader,optimize 上进行了很多改动
3. 插件和优化
   • a. webpack4 删除了合并相同的文件 CommonsChunkPlugin 插件，它使用内置API optimization.splitChunks 和 optimization.runtimeChunk，这意味着webpack会默认为你生成共享的代码块。
   • b. NoEmitOnErrorPlugin 废弃，使用 optimization.noEmitOnErrors替代，在生产环境中默认开启该插件。
   • c. ModuleConcatenationPlugin 废弃，使用optimization.concatnateModules替代，在生产环境中默认开启该插件。
   • d. NamedModulesPlugin 废弃，使用optimization.namedModules替代，在生产环境中默认开启该插件。
   • e. uglifyjs-webpack-plugin升级到了v1.0版本，默认开启缓存和并行功能。
4. 升级 extract-text-webpack-plugin 插件

yarn add extract-text-webpack-plugin@next -D

4. 环境准备

全局安装 webpack webpack-cli

yarn global add webpack webpack-cli

--save 运行程序时的依赖包 dependencies

--dev 安装到 devDependencies 开发时的依赖包

npmyarn全局npm install webpack -gyarn global add webpack开发时依赖npm install webpack --saveyarn add webpack运行程序时的依赖npm install webpack --save-devyarn add webpack --dev

5. 项目初始化

yarn init -y // npm init 新增package.json依赖包yarn add webpack webpack-cli --dev

6. 打包

6.1 执行 webpack

命令行之行 webpack 会自动打包 src/index.js 文件如果是 src/test.js，如何打包呢？

webpack src/test.js --output test01/test.js

此处有个 warning，加上 mode 即可：

webpack src/test.js --output test01/test.js --mode none

此时文件目录如下：

6.2 在打包文件夹下新建 index.html 文件

可以全局安装 http-server ，启动服务

yarn global add http-server

执行 http-server test01

浏览器访问 http://127.0.0.1:8082/index.html ，控制台打印的是 'test'