Webpack

安装webpack

最好本地安装，每个项目需求不同对应webpack版本不一样，可能会打不开。
用 npm install webpack webpack-cli --save-dev 安装在开发环境

配置解析

1. 全局单个文件
   webpack index.js
2. local 打包单个文件
   npx webpack index.js
3. 添加了webpack.config.js 在script标签定义了关键字和默认执行文件，执行后生成位置和路径
   npm run bundle （script里配置的关键字）

loader

webpack默认只识别js文件打包，其他文件格式就需要引入loader，在webpack.cnfig.js文件module配置reles,来打包对应格式的文件

1. autoprefixier
   
2. postcss

Plugin

可以在webpack运行到某个时刻的时候帮你做一些事情

htmlWebpackPlugin 会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到html文件中

cleanWebpackPlugin 会先把dist文件删除，然后重新打包一份，以防止有之前打包不用的辣鸡文件

source-map

代码报错的时候映射到原来的代码，而不是打包后代码

mode : 'development',
devtool: 'cheap-module-eval-source-map'  
//定位到行-第三方module一起-映射错误，比较快，打印错也比较详细

mode : 'production',
devtool: 'cheap-module-source-map'

webpack Devserver

启动一个服务器方便调试代码和发送ajax请求

bable 转化ES6代码

Tree Shaking

只支持ES module 引入 主要用于按需打包

1. 同步代码： 在webpack.config.js配置optimization
   
2. 异步import代码，无需配置，自动分割

打包分析 Preloding Prefetching

console界面 ctrl+shift+p 搜索 show coverage 点击录制，可以看到代码利用率，

miniCssExtractPlugin

Webpack

原文：https://www.cnblogs.com/TheLastDark/p/10800400.html