### entry:
- string:"./src/index.js"
单入口，打包生成也是单文件
- array:"./src/index.js",'./src/test.js'
多入口，打包生成是单文件
只有在HMR功能中让html热更新生效才用
- object:{main:"./src/index.js",test:"./src/test.js"}
{jquery:["jQuery"]}
多入口，打包生成是多文件
文件名是key
### output
// 输出文件名称
filename:
// 输出文件路径
path:
//所有资源引入公共路径前缀，可以配置CDN哦
publicPath:"/"
// 非入口chunk的名称
chu ......
### webpack性能优化
- 开发环境优化
- 生产环境优化
### 开发环境优化
- 优化打包构建速度
- 优化代码调试
### 生产环境优化
- 优化打包构建速度
- 优化代码运行的性能
### HMR（比较鸡肋）
hot module replacement 热模块替换
一个模块发生变化，只编译这个模块，其他模块不动
- 样式文件：可以使用，因为style-loader内部实现了
- JS文件：默认没有不能使用解决办法：
```
在JS文件中编写
if(module.hot) {
module.hot.accept('./print.js',function(){
print();
})
}
```
只能修改非入 ......
### JS 语法检查 eslint
轻易不要打开，孩子要听劝
eslint 需要eslint-loader 依赖eslint
默认是全部文件检查
npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import
##### webpack.config.js
```
rules:[
{
/*
** 应该只检查自己的源代码
** 设置检查规则：
** package.json中eslintConfig中设置~
** aribnb-->eslint-config-airbnb-base、 eslint、e ......
### 将css提取成单独文件
下载插件 mini-css-extract-plugin
```
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module:{
rules:[
{
test:/\.(css)$/i,
use:[
# 提取JS中的css成单独文件
miniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins:[
new miniCssExtractPlugin(
{
# 不配置默认在根目录下生成main.css文件
file ......