# webpack-study

**Repository Path**: qinjunbang/webpack-study

## Basic Information

- **Project Name**: webpack-study
- **Description**: webpack学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-05-27
- **Last Updated**: 2024-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack学习笔记


#### 全局安装webpack

```
    npm install webpack webpack-cli -g
```
全局安装webpack会有个问题，就是当你有两个项目依赖于不同版本的webpack，就会有一个项目打包不了，所以还是不全局安装webpack比较好。

#### 在当前项目安装webpack

1.  新建webpack-demo目录，然后进行npm项目初始化
```
npm init 或者 npm init -y
```
2.  在刚创建出来的package.json中添加`private`字段   
```
"private": true    /**表示私有的**/
``` 
3.  如果webpack已经全局安装，需要卸载     
```
npm uninstall webpack webpack-cli -g  /**卸载全局安装的webpack**/
```
   
4. 在项目根目录下执行安装命令

```  
npm install webpack webpack-cli --save-dev
```
   
5. 使用npx打印出当前的webpack版本 

```
npx webpack -v
``` 

#### 安装指定版本的webpack

```
npm info webpack /*查看webpack所有版本信息*/
npm install webpace@4.29.6 --save-dev
```

#### webpack的配置文件

在项目根目录新建文件webpack.config.js
```
const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
```

#### webpack手动打包命令

```
npx webpack /**默认会使用根目录下的webpack.config.js配置文件进行打包**/
npx webpack --config webpack.config.js /**指定配置文件打包**/
```

#### 使用npm scripts 简化webpack命令

1.  在package.json中的scripts字段下添加`bundle`字段
```
"bundle": "webpack"
```   

2.  使用npm命令打包
```
npm run bundle
```

#### 使用file-loader打包图片

1.  安装file-loader
```
npm install file-loader --save-dev
```

2.  在配置文件webpack.config.js中添加字段
```
module: {
    rules: [
        {
            test: /\.(jpg|png|svg|gif)$/,
            use: {           
                loader: 'file-loader',
                options: {
                   name: '[name].[ext]', /**原名字输出**/
                   outputPath: 'images/', /**打包后存放图片的文件夹**/
                }
            }
        }
    ]
}
```

#### 使用url-loader打包图片

1.  安装url-loader
```
npm install url-loader --save-dev
```

2.  在配置文件webpack.config.js中添加字段
```
module: {
    rules: [
        {
            test: /\.(jpg|png|svg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/',  
                    limit: 204800, /**小于20kb的图片，打包成base64放到bundle.js文件**/
                }
            }
        }
    ]
}
```

#### 使用style-loader和css-loader打包css文件

1.  安装style-loader 和 css-loader
```
npm install style-loader css-loader --save-dev
```
2.  在webpack.config.js文件中添加配置
```
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}
```


#### 使用sass-loader打包.sass文件
1.  安装sass-loader 和 node-sass
```
npm install sass-loader node-sass --save-dev
```
2.  在webpack.config.js文件中添加配置
```
module: {
    rules: [{
        test: /\.sass$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
    }]
}
```
> 数组形式的loader是从下到上，从右到左执行 sass-loader -> css-loader -> style-loader        


#### 使用postcss-loader自动添加css厂商前缀
1.  安装postcss-loader
```
npm install postcss-loader --save-dev
```
2.  postcss-loader需要配合autoprefixer插件使用
```
npm install autoprefixer --save-dev
```
3.  在项目根目录添加postcss.config.js文件
```
module.exports = {
    plugins: [
        require('autoprefixer');
    ]
}
```
4.  在webpack.config.js中添加配置
```
module: {
    rules: [{
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
    }]
}
```

5.  确保所有的scss文件都会被所有loader处理,修改webpack.config.js中的配置
```
{
    test: /\.scss$/,
    use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    /**确保每个scss都被所有loader处理**/
                    importLoaders: 2,
                    /**分模块打包css**/
                    modules: true
                }
             },
             'sass-loader',
             'postcss-loader'
     ]
}
```

#### 使用file-loader打包字体文件
1.  安装file-loader
```
npm install file-loader --save-dev
```
2.  在webpack.config.js文件中添加modules    
```
{
    test: /\.(eot|ttf|svg)$/,
    use: {
        loader: 'file-loader'
    }
}
```


#### 使用插件使webpack打包更便捷

**1).  安装自动生成index.html插件 html-webpack-plugin**

1.  安装html-webpack-plugin
```
npm install html-webpack-plugin --save-dev

```
htmlWebpackPlugin 会在打包结束后，自动生成index.html文件，并把对应的js引入index.htm文件中    

2.  在webpack.config.js中引入插件
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html' /**自动以src/index.html为模板，在dist目录下生成新的index.html文件**/
    })
]

```

**2)使用clean-webpacl-plugin插件自动删除dist插件再打包**

1.  安装插件clean-webpack-plugin
```
npm install clean-webpack-plugin --save-dev
```

2.  在webpack.config.js中使用插件
```
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [new CleanWebpackPlugin({})] /**默认清除的是dist目录**/
```


#### sourceMap配置

sourceMap 映射src目录的源文件，能定位到哪行报错    

1.  开启sourceMap,在wepback.config.js中添加配置
```
devtool: 'source-map'
```
2.  sourceMap的最佳实现
```
devtool: 'cheap-module-eval-source-map' /**开发环境中使用**/

devtool: 'cheap-module-source-map' /**生产环境**/
```

#### 使用WebpackDevServer提高开发效率

1.  安装webpack-dev-server
```
npm install webpack-dev-server --save-dev
```
2.  在webpack.config.js中配置devServer
```
devServer: {
    contentBase: './dist',
    open: true,     /**open true 可以自动打开浏览器**/
    proxy: {
     "/api": "http://new.junbang.com/" /**请求api代理转发**/ 
    },
    port: 8081,  /**端口号**/ 
}
```

3.  在package.json中添加watch命令
```
"scripts": {
    "watch": "webpack --watch"，
    "start": "webpack-dev-server"
}
```
使用：npm run watch 监听文件有变化自动打包
使用：npm run start 可以自动监听,自动打包, 自动刷新浏览器


#### 自定义server 

1.  需要安装express和webpack-dev-middleward这两个插件
```
npm install express webpack-dev-middleware --save-dev
```
2.  新建server.js 并引入插件
```
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config);

const app = express();

app.use(webpackDevMiddleware(complier, {
    publicPath: config.output.publicPath
}));

app.listen(3000,() => {
    console.log('server is running on prot 3000');
});
```
3.  在package.json中设置serve命令
```
"scripts": {
    "serve": "node server.js"
}
```
npm run serve 使用的就是我们server.js配置的服务器
不过server.js还需要写很多，这只是简单的server


#### 模块热更新HMR

1.  开启模块热更新，在webpack.config.js中添加配置
```
devServer: {
    hot: true,
    hotOnly: true,  /**hotOnly: false 浏览器可以自动刷新**/
}
```

2.  使用HMR插件，在webpack.config.js中引入插件
```
const webpack = require('webpack');
plugins: {
    new webpack.HotModuleReplacementPlugin()
}
```
使用`npm run start`重启服务使新的配置生效

**模块热更新HMR作用：**
> css编写.  修改无需重新刷新浏览器就可显示效果
> js模块发生改变可以指定更新当前js模块，不需要刷新浏览器

3.  js模块热更新，在index.js文件中编写代码
```
import number from './number';
number();

if (module.hot) {
    module.hot.accept('./number', () => {
    /**当number模块有改变重新渲染**/
     number();
    }
}
```

#### 使用Babel处理ES6语法

1.  安装babel-loader 和 @babel/core
```
npm install --save-dev babel-loader @babel/core
```
2.  在webpack.config.js中添加配置
```
module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }]
}
```
3.  安装@babel/preset-env模块对ES6语法进行翻译
```
npm install @babel/preset-env --save-dev
```
4.  在webpack.config.js中的modules rules babel-loader 中配置options对象
```
options: {
    presets: ["@babel/preset-env"]
}
/**或者在项目根目录下创建配置文件.bablerc**/
{
    "presets": ["@babel/preset-env"]
}
```

5.  使用@babel/polyfill 加上低版本没有的语法, 比如map() .  Promise等
```
npm install --save @babel/polyfill
```
6.  在所以代码运行之前,可以放在入口文件index.js最顶部
```
import "@babel/polyfill";
```
7.  polyfill默认会把所有翻译过代码都加进来，有时候我们没有用到的新方法，也有了翻译的方法在里面了，所以我们要过滤掉，没用上的就不要加载进来了，这样包更小，所以在webpack.config.js babel-loader中修改配置
```
options: [['@babel/preset-env', {
    useBuiltIns: 'usage'
}]]
```
8.  已经支持ES6语法的浏览器版本，没必要在翻译所以我们可以指定浏览器版本
```
options: [['@babel/preset-env', {
    targets: {
        chrome: "67" /**更多浏览器版本配置去babel官网查看**/
    },
    useBuiltIns: 'usage'
}]]
```
9.  当指定了useBuiltIns: 'usage'，会自动引入@babel/polyfill,所以可以去掉index.js import的@babel/polyfill,但是可以需要安装依赖
```
npm install --save core-js
```

10.  如果是写业务代码以上配置没问题，如果要写框架.  类库.  第三方模块什么的，为了避免变量的全局污染（因为polyfille翻译的变量挂载到全局变量）而使用plugin-transform-runtime插件

11.  安装transform-runtime插件
```
npm install --save-dev @babel/plugin-transform-runtime
npm install --save #babel/runtime
```
12.  在webpack.config.js中修改配置
```
module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
            plugins: [["@babel/plugin-transform-runtime", {
                corejs: 2
                helpers: true,
                regenerator: true
                useESModules: false
            }]]
        }
    }]
}
```
13.  因为我们配置了corejs: 2,所以要加装corejs的依赖
```
npm install --save @babel/runtime-corejs2
```

#### 配置React代码的打包
babel也可以打包react代码

1.  安装react框架
```
npm install react react-dom --save
```
2.  安装@babel/preset-react
```
npm install --save-dev @babel/preset-react
```
3.  在.babelrc中添加配置
```
presets: ["@babel/preset-env","@babel/preset-react"]
```

#### 使用Tree Shaking去掉没有引用的方法/ 模块

Tree Shaking只支持 ES Module 就是import export不支持require('')    

1. 在mode: 'development'中配置Tree Shaking, 在webpack.config.js中
```
optimization: {
    usedExports: true
}
```
2. 在mode: 'production'中 默认就有,不需要添加任何配置

3. 在package.json中配置不需要Tree Shaking的模块
```
"sideEffects": false   /**所有模块都需要Tree Shaking**/
"sideEffects": ['@babel/polly-fill', '*.css']  /**对这两个模块不做Tree Shaking**/
```

#### Development 和 Production 模式的区分打包

1. 创建webpack.common.js 放公有的配置项
2. 创建webpack.dev.js    放开发独有的配置项
3. 创建webpack.prod.js   放生产独有的配置项 

4. 使用webpack-merge 把webpack.common.js合并到其他两个文件
```
npm install webpack-merge --save-dev
```

5. 在webpack.dev.js中引入插件
```
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const devConfig = {
...
}
module.exports = merge(commonConfig, devConfig);
```
在webpack.prod.js中也作跟webpack.dev.js同样的处理


#### Code Splitting 代码分割

1. 同步加载模块 在webpack.config.js中配置splitChunks
```
optimization: {
   splitChunks: {
       chunks: 'all'
   }
}
```
2. 异步加载模块无需任何配置默认就会自动分割

3. 创建一个异步加载的js模块
```
/** webpackChunkName: "lodash" 给这个模块起这个文件名 **/
function getComponent() {
    return import(/* webpackChunkName: "lodash"*/ 'lodash').then(({default: _}) => {
        var element = document.createElement('div');
        element.innerHtml = _.join(['@', 'bang']);
        return element
    });
}
getComponent().then(element => {
    document.body.appendChild(element);
});
```

4. 安装babel-plugin-dynamic-import-webpack对异步加载模块语法进行翻译
```
npm install @babel/plugin-syntax-dynamic-import  --save-dev
```

5. 在.babelrc配置文件中使用plugin-syntax-dynamic-import插件
```
plugins: ["@babel/plugin-syntax-dynamic-import"]
```

#### SplitChunksPlugin配置参数详解

```
/** 在webpack.config.js文件中 **/
optimization: {
    splitChunks: {
        /** all:-- 所有模块都分割 **/
        /** async -- 只对异步加载的模块进行分割 **/
        /** initial -- 只对同步模块进行分割 **/
        chunks: 'all', 
        minSize: 30000,  /** 大于30000b(30kb)才会分割 **/
        maxSize: 0,  /**  一般不配置，会对大文件再次分割 **/
        minChunks: 1,  /**  引用这个模块超过一次就会分割 **/
        maxAsyncRequests: 5, /**  同时只能加载分割5个库 **/
        maxInitialRequests: 3, /**  最多分割出3个文件 **/
        automaticNameDelimiter: "~", /** 文件名连接符  **/
        name: true
        cacheGroups: {
            /** 同步模块加载必需配置
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                /** 如果模块同时满足cacheGroups和default， **/
                /** 根据priority来决定模块的归属谁的值大属于谁 **/
                priority: -10, 
                filename: 'vendors.js' /** 打包成的文件名 **/
            },
 	    /** 同步非node_modules里面的模块配置专用 **/
            default: {
                priority: -10,
                /** 已经打包过的模块忽略 **/
                /** 不再打包分割 **/
                reuseExistingChunk: true,
                filename: 'common.js'
            }
        }
    }
}
```

#### lazy loading 懒加载异步模块


1. 打包分析工具

首先在打包的时候生成josn格式的描述文件，然后在package.json中添加命令
```
scripts: {
    "dev-build": "webpack --profile --json > stats.json --config webpack.dev.js"

}
```
使用：`npm run dev-build`
生成的.stats.json文件可以用来分析


#### 使用Preloading, 空闲时候，静默加载我们的异步模块

1. 查看js文件中代码的使用率，打开控制台 command + shift + p
2. 搜索 Coverage 选中show Coverage 然后点击录制按钮变红后刷新页面
3. 在index.js中创建一个异步加载模块js的方法
```
document.addEventListener('click', () => {
    import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {
     func();
    });
});
```
正常情况下呢，我们只有在点击的时候，才加载click.js,但是配置了`Prefetch: true`,就会空闲时主动加载我们的click.js。空闲时主动加载解决了异步加载慢的问题，因为文件加载过了，再点击加载就会使用缓存的文件。

#### css文件代码分割

1. webpack 用style-loader处理的css会放到文件<head>标签中
2. 使用mini-css-extract-plugin把css分割成单独文件
```
npm install --save-dev mini-css-extract-plugin
```
3. 这个插件不支持热更新（截止目前），所以一般是生产环境才用
4. 在webpack.prod.js中 将style-loader替换为MiniCssExtractPlugin.loader
```
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({});
]
module: {
    rules: [
       {
           test: /\.css$/,
           use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
    ]
}
```
5. 过滤Tree Shakking, 在package.json中添加配置
```
"sideEffects": ["*.css"]
```

6. 配置filename和chunkFilename, 在webpack.prod.js中
```
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[name].chunk.css'
    });
}
```

7. 使用optimize-css-assets-webpack-plugin对css合并和压缩
```
npm install --save-dev optimize-css-assets-webpack-plugin
```
8. 在webpack.prod.js中使用optimize-css-assets-webpack-plugin
```
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
optimization: {
    minimizer: [new OptimizeCssAssetsPlugin({})]
}
```

#### 多个入口文件引用的css打包到一个css文件

1. 借助splitChunks, 在webpack.prod.js中添加配置
```
optimization: {
    splitChunks: {
        cacheGroups: {
            styles: {
                name: 'styles',
                test: /\.css$/,
                chunks: 'all',
                enforce: true
            }
        }
    }
}
```

2. 还可以把一个入口文件引入的所有css打包到对应的一个文件。这样每个入口引用的css，就会生成对应一个css文件。这个配置也借助splitChunks，在webpack.prod.js中配置
```
optimization: {
    splitChunks: {
        cacheGroups: {
            mainStyles: {
                name: 'main',
                test: (m,c,entry = 'main') => m.constructor.name === 'CssModule && recursiveIssuer(m) === entry,
                chunks: 'all',
                enforce: true
            }
        }
    }
}
```

#### webpack与浏览器缓存

1. 在webpack.prod.js中配置contenthash
```
output: {
   filename: '[name].[contenthash].js',
   chunkFilename: '[name].[contenthash].js'
}
```
contenthash在文件没有改变时，它不会变，对应的文件有改变它的值就会变，这样浏览器加载的就是新文件


#### 通过webpack.ProvidePlugin插件自动帮我们引用没有import的模块

1. 在webpack.common.js中配置ProvidePlugin
```
const webpack = request('webpack');
plugins: [
    new webpack.ProvidePlugin({
    $: 'jquery'
    })
]
```

解决问题: 有的模块使用的是jquery,但是没有import jquery,`$`对象找不到，只在首页引入jquery是不行的,这时候借助webpack.ProvidePlugin,帮我们在使用`$`对象的模块引入jquery。



#### 让this都指向window
1. 安装
imports-loader
```
  npm install imports-loader --save-dev
```

2. 在webpack.common.js中添加配置
```
module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
            loader: 'babel-loader',
        }, {
            loader: 'imports-loader?this=>window'
        }]
    }]
}
```


#### 环境变量的使用

1. 在webpack.common.js中使用Env
```
comst merge = require('webpack-merge');
const prodConfig = require('./webpack.prod.js);
const devConfig = require('./webpack.dev.js');
module.exports = (env) => {
 if (env && env.production) {
    return merge(commonConfig, prodConfig);
 } else {
    return merge(commonConfig, devConfig);
 }
}
```
2. 在package.json中修改命令
```
"scripts": {
    "dev-build": "webpack -- config ./webpack.common.js",
    "build": "webpack --env.production  --config ./webpack.common.js"
}
```

#### Library的打包

1. 创建一个自己的包模块library
```
npm init -y
```
2. 在包目录下新文件src/math.js 和 src/string.js
3. 在src/math.js中编写代码
```
export function add(a, b) {
    return a + b;
}
export function minus(a, b) {
    return a - b;
}
export function multiply(a, b) {
    return a * b;
}
export function division(a, b) {
    return a / b;
}
```
4. 在src/string.js中编写代码
```
export function join(a, b) {
 return a + " " + b;
}
```
5. 在src/index.js中编写代码
```
import * as math from './math.js';
import * as string from './string';

export default { math, string }
```
6. 在项目中安装webpack 和 webpack-cli
```
npm install webpack webpack-cli --save
```
7. 在项目中创建webpack.config.js
```
const path = require('path');
module.exports =  {
    mode: 'production',
    entry: './src/index.js'
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js',
        library: 'library',
        libraryTarget: 'umd'
    }
}
```

8. 在package.js中配置入口文件和打包命令
```
main: './src/index.js',
scripts: {
    "build": "webpack"
}
```

9. 别人使用我们的库可能用到的引入方式
1、 `import library from 'library';`
2、` const library = require('library');`
3、 `require(['library'], function() {});`
4、 `<script src="./library.js"></script>`

10. 通过在webpack.config.js中配置`libraryTarget: 'umd'`可以使用前面三种引用
11. 通过在webpack.config.js中配置`library: 'library'`可以使用`<script>`引用

12. 在自己的库中使用别人的库,这里引入lodash库
```
npm install lodash --save
```

13. 在src/string.js中 使用lodash
```
import _ from 'lodash';

export function join(a, b) {
    return _.join([a, b], ' ');
}
```
14. 问题：默认的lodash也会被打包到我们的代码中，而别人不知道，也有可能在自己项目中，引入了自己的lodash,造成模块冗余，所以需要在webpack.config.
```
externals: ['lodash']
```
注意：这个时候别人用我们的库需要手动引入lodash再引入library（我们的库）

15. 让别人方便的使用我们的代码,可以在package.json中配置
```
"main": "./dist/library.js",
```
16. 在npm官网注册一个账号,并把我们的库上传到npm
```
npm adduser -- 回车添加账号和密码
npm publish -- 把包上传到npm仓库
```

17. 安装我们的库
```
npm install library
```
18. 我们自己创建的库名跟npm上的库名不能相同，不然有可能上传不了。


#### PWA的打包配置 

PWA作用是缓存页面，当服务器挂掉了，还是可以看到原来缓存的页面
1. 安装workbox-webpack-plugin插件
```
npm install workbox-webpack-plugin --save-dev
```
2. 在webpack.prod.js中使用workbox-webpack-plugin插件
```
const WorkboxPlugin = require('workbox-webpack-plugin');
plugins: [
    new WorkboxPlugin.GenerateSW({
        clientsClaim: true,
        skipWaiting: true
    })
]
```
3. 在index.js中看看浏览器是否支持PWA,并注册我们要缓存的文件
```
if('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js)
            .then(registration => {
                 console.log('service-worker registed');
            }).catch(error => {
                 console.log('service-worker register error');
            });
    }
}
```
这样注册了service-worker.js之后，本来我们需要npm run dev 把服务开启之后能访问，如果关掉服务再刷新，因为已经访问成功过一次，有了缓存，所以还是可以看到页面

#### webpack打包TypeScript


1. 安装ts-loader 和 typescript
```
npm install ts-loader typescript --save-dev
```
2. 在webpack.config.js中添加配置
```
const path = require('path');
 module.exports = {
   entry: './srcindex.tsx',
   module: {
      rules: [{
        test: /\.[tsx]|[ts]?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }]
   },
   output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
   }
}
```
3. 在项目根目录创建tsconfig.json(必需)
```
{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "es6",
    "target": "es5",
    "allowJs": true,
  }
}
```
注意：TypeScript 不能对引用的外部模块校验，比如调用lodash中的`join()`方法，不传参数也不报错。如需要提示，需安装@types/lodash，这样不传参数也会有提示哦。 更多库的@type检测请上网搜索！
4. 安装@types/lodash
```
npm install @types/lodash --save-dev
```

#### webpackDevServer实现请求转发

1. 在webpack.config.js中配置proxy
```
devServer: {
    proxy: {
       '/api': 'http://new.junbang.vip'
    }
}
```
2. 更复杂的配置 比如把请求header.json 变成demo.json
```
devServer: {
    proxy: {
        '/api': {
             treget: 'http://new.junbang.vip',
             pathRewrite: {
                 'header.json': 'demo.json'
             }
         }
    }
}
```
3. 如果后台对origin做了限制可以加配置
```
changeOrigin: true /**建议始终都加**/
```

#### WebpackDevServer解决单页面应用路由问题

1. 在webpack.config.js中
```
devServver: {
    historyApiFallback: {
        rewrites: [{
            from: /\.*/,
            to: 'index.html'
        }]
    }
}
```
上面的配置等价于historyApiFallback: true，这个配置只在开发有用，上线需要对线上服务器也配置。配置好了，访问不了的页面就会显示首页


#### Eslint 在wepback中的配置

1. Eslint是什么？Eslint是约束代码的规范
2. 安装Eslint
```
npm install eslint --save-dev
```
3. 生成配置文件
```
npx eslint --init
```
在根目录发现文件.eslintrc.

4. 使用babel-eslint
```
npm install babel-eslint --save-dev
```
5. 在.eslintrc.js中配置
```
"parser": "babel-eslint"
```
6. 使用命令校验src目录下的js
```
npx eslint src
```
7. 忽略规则,在.eslintrc.js中
```
"rules": {
  "react/jsx-filename-extension": 0
}
```
把规则置成0就可以忽略 1是警告 2是报错


#### 在webpack使用eslint-loader校验代码

1. 安装eslint-loader
```
npm install eslint-loader --save-dev
```
2. 在webpack.config.js中添加配置
```
module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  }]
}
```
3. 想要在`npm run serve`的时候把eslint校验的错误在浏览器上输出, 可以在webpack.config.js中配置
```
devServer: {
    overlay: true
}
```
注意：在webpack中使用eslint-loader检测代码会影响打包速度。可以在git 生命钩子，提交代码前校验代码，不符合不给提交

#### webpack性能优化

>1.提升webpack打包速度
>>1)跟上技术的迭代，使用最新版node/npm/yarn/webpack    
>>
>>2)尽量少用loader,loader也应该检测尽量少的代码
>>   
>>3)比如校验js文件的时候，忽略/node_modules/
>>    
>>4)或者只对src下面的文件校验    
>>`include: path.resolve(__dirname, './src')`    
>>5)合理使用插件，使用性能好的，官方推荐的    
>
>2.合理配置resolve参数    
>>`test: /\.jsx?$/` '?' 表示'x'可有可无 => js/jsx    
>>然后在webpack.config.js中添加配置
>>```
>>resolve: {
>>  extensions: ['.js', '.jsx']
>>}
>>```
>>表示我们加载import 的时候，不写文件后缀名，默认会找.js/.jsx
>
>3.当我们import 一个文件夹，可能指定要找的文件名
>>```
>>resolve: {
  >>mainFiles: ['index', 'main']
>>}
>>```
>
>4.使用第三方模块时候，因为我们不会去改动这些模块,但是每次打包都会重新分析一次这些第三方模块，浪费时间,所以希望只在第一次分析，后面直接用就行。所以
>>1）新建webpack.dll.js文件
>>```
>>const path = require('path');
>>module.exports = {
>>   mode: 'production',
>>   entry: {
>>   vendors: ['react', 'react-dom', 'lodash']
>>  },
>>  output: {
>>    filename: '[name].dll.js',
>>    path: path.resolve(__dirname, '../dll'),
>>    library: ['name'] /** library 可以把当前模块暴露出去 **/
>>   }
>>  }
>>  ```
>>
>> 2) 把这些第三方模块引入index.html中，可以手动引入，也可以用插件
>>```
>>npm install add-assets-html-webpack-plugin --save-dev
>>```
>>3) 在webpack.config.js中使用插件
>>```
>>const AddAssetHtmlWebpackPlugin require('add-asset-html-webpack-plugin');
>>
>>new AddAssetHtmlWebpackPlugin({
 >>   filepath: path.resolve(__dirname, '../dll/vendors.dll.js')
>>})
>>```
>>
>>4) 在写代码使用到第三方模块时，使用vendors.dll.js
>>```
>>npm install dll-plugin --save-dev
>>```
>>5) 在webpack.config.js中配置
>>```
>>const webpack = require('webpack');
>>plugins: [
>>  new webpack.DllPlugn({
>>    name: '[name]',
>>    path: path.resolve(__dirname, '../dll/[name].manifest.json')
>>  }),
>>  new webpack.DllReferencePlugin({
>>    manifest: path.resolve(__dirname, '../dll/vendors.manifest.json')
>>  })
>>]
>>```
>>配置完成，第三方模块我们只需要手动打包一次，后面在打包项目的时候，就只会打包我们改动代码的目录src

#### 多页面打包配置

1. 首先需要配置多个入口，生成多个js文件
```
entry: {
  main: './src/index.js',
  list: './src/list.js'
}
```
2. 其次多new 几个HtmlWebpackPlugin,生成那就的html文件
```
new HtmlWebpackPlugin({
  template: 'src/index.html',
  filename: 'index.html',
  chunks: ['runtime', 'vendors', 'main']
}),
new HtmlWebpackPlugin({
  template: 'src/index.html'
  filename: 'list.html',
  chunks: ['runtime', 'vendors', 'list']
})
```
3. 可能遍历configs.entry自动生成