webpack 学习小结

webpack 是一个模块打包工具（前提要安装 node使用npm来安装webpack）

注意npm在安装的时候速度很慢，建议用淘宝镜像

//第一安装淘宝
npm install -g cnpm --registry=https://registry.npm.taobao.org
//或者使用–registry参数指定镜像服务器地址，为了避免每次安装都需要--registry参数，可以使用如下命令进行永久设置：
npm config set registry http://registry.npm.taobao.org

1、安装webpack,webpack-cli , webpack-dev-server

//全局安装
npm i webpack webpack-cli webpack-dev-server -g
//查看webpack的信息
//webpack -v

//局部安装
npm i webpack webpack-cli webpack-dev-server --save-d
//查看webpack的信息
//npx webpack -v

 2、webpack 的配置

添加webpack默认配置文件 webpack.config.js

//注意：这个文件名必须叫webpack.config.js如果需要改成别的名字，那么要用 npx webpack --config webpackconfig.js 这样就把配置文件改成webpackconfig.js了
//注意：在运行npx webpack命令时，webpack.config.js必须在当前目录下
const path = require('path');
module.exports = {                            　　　 //注意：这里是exports
    entry: {                                        //打包的入口文件，即从哪个Js文件开始进行打包,这边是从src文件夹的index.js文件
        'index': './src/index.js',                  //把./src/index.js路径下的文件打包成index.js
        'main': './src/main.js'                     //把./src/main.js路径下的文件打包成main.js
    },
    output: {
        // publicPath: 'https://www.cdn.cn',        //表示把js文件全部放到指定的域名下，在引用的时候在添加上地址为前缀
        filename: '[name].js',                      //打包好的文件命名
　　　　　chunkFilename: '[name].chunk.js',　　　　　　 //表示在入口文件中引用的文件打包到指定的文件名下，即间接加载的js文件
        path: path.resolve(__dirname, 'dist')       //这里的路径要用绝对路径，引入path模块，即文件放在dist文件夹下
    },

　　resolve: {
    　　extensions: ['.js', '.ts', '.tsx']　　　　　　 //表示书写的时候自动省略后缀，读取的时候自动获取，尽量在ts情况下应用， ts环境下需要配置

　　},

　　mode: 'development', // 这个工具是对js文件产生映射关系，方便排错  // inline表示生成的映射代码放到打包好的js文件中，如果没有，则另外产生一个映射文件 // cheap 表示不提示很祥细的错误位置，并且只检查业务代码 // module表示不仅对业务代码产生映射，还在loader和第三方库产生映射 // eval是应用js里的eval语法产生映射关系 // 最佳配置推荐：development => cheap-module-eval-source-map production => cheap-module-source-map devtool: 'cheap-module-eval-source-map', }

3、文件目录下的package.json配置（注意：json文件里是不允许注释的）

{
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "private": true,                        //私有项目添加private声明
  // "main": "index.js",                  //如果是私有的项目，可以关闭掉main的配置
  "scripts": {
    "bundle": "webpack"                    //当在命令行里执行npm run bundle，那么系统自动从依赖里找webpack，并且执行npx webpack,那么这里就不用执行npx webpack了
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
}

 4、loader的用法

loader 是模块打包工具，原本webpack是不提供如图片，文件等资源的打包，那么这时便可以引入模块打包工具，当在打包过程中，遇到不能打包的文件时，webpack就会引用相应的模块进行打包

//注意：这个文件名必须叫webpack.config.js如果需要改成别的名字，那么要用 npx webpack --config webpackconfig.js 这样就把配置文件改成webpackconfig.js了
//注意：在运行npx webpack命令时，webpack.config.js必须在当前目录下
const path = require('path');
module.exports = {                             //注意：这里是exports
    entry: './src/index.js',                   //打包的入口文件，即从哪个Js文件开始进行打包,这边是从src文件夹的index.js文件
    output: {
        filename: 'test.js',                   //打包好的文件命名
        path: path.resolve(__dirname, 'dist'), //这里的路径要用绝对路径，引入path模块，即文件放在dist文件夹下
    },
    mode: 'development',                       //当为production时会压缩代码，当为development时就不会压缩代码,默认是production
    module: {                                  //webpack的模块打包工具
        rules: [                               //相应模块的打包规则
            {
                test: /\.(png|jpg|gif)$/,      //较验规则，以正则表达式来较验
                use: {
                    loader: 'file-loader'      //调用的模块，首先要先安装file-loader eg: npm i file-loader -D;
                }
            }
        ]
    }
}

举例：对应的js入口

import Img from '../assets/img/baidu.png'
console.log(Img);
// 会输出转义好的img图片 b15c113aeddbeb606d938010b88cf8e6.png
let pic = document.createElement('img');
pic.src = Img;
let elem = document.createElement('div');
elem.appendChild(pic);
document.body.appendChild(elem);

file-loader 模块，以下代码是放在rules的数组里面，font文件也可以用file-loader来打包

{
    test: /\.(png|jpg|gif)$/,            //较验规则，以正则表达式来较验
    use: {
        loader: 'file-loader',           //调用的模块，首先要先安装file-loader eg: npm i file-loader -D;
        options: {                       //进行配置
            name: '[name].[ext]',        //注意：这里的内容要放在单引号里面，可以是[name],[hash],[path],后缀是[ext],更多祥见官网
            // name: function(addr){     //这里可以是一个函数，接收一个地址的参数
            //     return 'abc.[name].[ext]';
            // }
            outputPath: './image'        //如果配置了outputPath那么就表示输出的路径在dist目录下的image文件夹下
        }
    }
}

url-loader模块，以下代码是放在rules的数组里面

// 这个插件会把文件转换成base64的代码，放在js文件里面，但是如果文件过大，那么会导致加载比较慢，建议只有小文件用这个loader
{
    test: /\.(png|jpg|gif)$/,                   //较验规则，以正则表达式来较验
    use: {
        loader: 'url-loader',                  //调用的模块，首先要先安装url-loader eg: npm i url-loader -D;
        options: {                             //进行配置
            name: '[name].[ext]',              //注意：这里的内容要放在单引号里面，可以是[name],[hash],[path],后缀是[ext],更多祥见官网
            // name: function(addr){           //这里可以是一个函数，接收一个地址的参数
            //     return 'abc.[name].[ext]';
            // }
            outputPath: './image',             //如果配置了outputPath那么就表示输出的路径在dist目录下的image文件夹下
            limit: 2048             //表示当图片或者文件只有2Kb的时候转成base64,否则就会像file-loader一样工作
        }
    }
}

 style-loader，css-loader模块的使用

{
    test:/\.css$/,      //表示当遇到css文件的时候的处理方式
    use: [              //use这时是以一个数组的形式应用，运行方式是从左到右，从下到上的，先运行css-loader再到style-loader
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            // importLoaders: 2,   //表示在 css-loader 前应用的 loader 的数量，那么当sass中还有import的css样式时，那么同时也会走sass-loader和postcss-loader，如果没有sass-loader的时候可以不配置
            modules: true           //是否对css文件进行模块化管理，注意这里是modules
        }
    },
    // 'sass-loader',   //首先要安装sass-loader npm i sass-loader -D  前提要安装好style-loader 与 sass-loader
    'postcss-loader'
    ]
}

所对应的Js文件

import Img from '../assets/img/baidu.png';
import createElement from './createElement';
import style from './index.css';

createElement();

let pic = document.createElement('img');
pic.src = Img;
pic.classList.add(style.set);     //注意：如果是通用的标签，那么会作用于所有的对应元素，也可以用style['set']
pic.id = style.set;               //如果要用里面的Id选择器，那么如右设置，那么id也会转成转码后的id
let elem = document.createElement('div');
elem.appendChild(pic);
document.body.appendChild(elem);

如果css是用sass来编写的，那么要添加sass-loader模块

{
    test:/\.sass$/,      //如果css是用sass来编写的，那么要改变规则
    use: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            importLoaders: 2   //表示在 css-loader 前应用的 loader 的数量，那么当sass中还有import的css样式时，那么同时也会走sass-loader和postcss-loader
        }
    },
    'sass-loader',   //首先要安装sass-loader npm i sass-loader -D  前提要安装好style-loader 与 sass-loader
    'postcss-loader'
    ]
}

 postcss-loader模块，这个模块是用来给特定的样式添加产商前缀如-webkit-

首先添加postcss-loader模块并且添加配置

{
    test:/\.css/,                                           //普通的css规则
    use: ['style-loader', 'css-loader', 'postcss-loader']   //首先postcss-loader npm i postcss-loader -D
}

添加一个配置文件postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')        //首先要安装autoprefixer插件 npm i autoprefixer -D
    ]
}

重新编译完后，就自动添加上产商的前缀了

5、plugins插件的应用

plugins 相当于webpack在生命周期函数里的某个期间运行的函数

html-webpack-plugin插件

new htmlWebpackPlugin({
    title: 'index文件的标题',                //输出的html的title设置
    filename: 'index.html',                //输出的html的文件名
    template: './src/index.html',          //引入template，这个可以指定一个html模板
    showErrors: true,                      //当webpack报错的时候，会把错误信息包裹再一个pre中，默认是true。
    // inject有四个值： true body head false
    //         true =》 默认值，script标签位于html文件的 body 底部
    //         body =》 script标签位于html文件的 body 底部
    //         head =》 script标签位于html文件的 head中
    //         false =》 不插入生成的js文件，这个几乎不会用到的
    inject: 'body',
    chunks: ['index'],                    //chunks主要用于多入口文件，当你有多个入口文件，那么数组里的值便是你需要选择打包进行的js文件包，如果不设置，则是全部显示
    // excludeChunks: ['devor.js'],       //排除掉一些js后全部打包
    favicon: './assets/img/baidu.png',    //给你生成的html文件生成一个 favicon ,值是一个路径
    hash: true,            //是否生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，比如最终引入是：<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。这个可以避免缓存带来的麻烦
    cache: true,                         //默认是true的，表示内容变化的时候生成一个新的文件
    minify:{
        caseSensitive: false,                       //是否大小写敏感
        removeComments:true,                        // 去除注释
        removeEmptyAttributes:true,                 // 去除空属性
        collapseWhitespace: true                    //是否去除空格
    }

})

所对应的html的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

clean-webpack-plugin插件

plugins: [
    new cleanWebpackPlugin({            //首先要安装clean-webpack-plugin,并且引入const {CleanWebpackPlugin} = require('clean-webpack-plugin');
        cleanOnceBeforeBuildPatterns: ['./dist'] //这个插件的主要作用是清除上次打包的文件  该配置表示，清除上次建立的dist文件夹下的所有内容
    })
]

6、webpack-dev-server的使用

--watch的妙用

在package里面做中上配置，那么当有文件修改的时候就会自动重新打包

利用webpack-dev-server 进行自动化打包

首先安装 webpack-dev-server  利用命令行 npm i webpack-dev-server -D

devServer: {                           //前提在安装了webpack-dev-server后使用
    contentBase: './dist',             //打包后的文件目录
        open: true,                    //是否在运行npm run start后自动打开浏览器
        port: 8090,                    //配置端口号
        hot: true,                     //启用 webpack 的模块热替换特性：
        hotOnly: true,                 //替换失败后，是否重新刷新页面，一般与hot配置使用
        proxy: {                       //在devServer服务器下进行反向代理
        '/api': 'http://localhost:3000'
    }
}

注意：如果配置了hot与hotOnly为true那么相对应的要开启webpack局部更新的插件

const webpack = require('webpack');     //要先引入webpack里的默认模块
//在Plugins里添加插件
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

在package.json做如下配置

  "scripts": {
    "start": "webpack-dev-server"
  },

使用的时候用 npm run start 便可（注意：这个功能打包出来的dist文件是放面电脑内存中的，如果需要打包引出，那么需要运行另外webpack的命令）

7、webpack中使用Babel处理ES6语法

所需要准备的插件：参看  https://www.babeljs.cn/setup#installation

npm install --save-dev babel-loader @babel/core    //建立加载器

npm install @babel/preset-env --save-dev            //实现语法的转换

npm install --save @babel/polyfill        //适配一些浏览器无法转换的ES6语法  注意使用这个要在入口文件顶部引入，如果配置usage，则无需引入，但需要安装    import "@babel/polyfill";

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [["@babel/preset-env", {"useBuiltIns": 'usage'}]]
        }
    }
}

以上是在modules里配置的

 8、分离出生产模式与开发模式的配置

首先安装webpack-merge --save-d模块实现配置的拼装 , 新建build文件夹，并且添加配置， 并且在build里添加三个js文件，修改package.json里的配置如下，

在打包有过程中有可能会提示以下内容：

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it
doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

这个时候就需要安装 npm install --save core-js@2 同时还要在babel中做如下配置，具体见代码：

  "scripts": {
    "start": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.pro.js"
  },

webpack.dev.js的内容如下

let path = require('path');
let commonConfig = require('./webpack.common');
let merge = require('webpack-merge');

let devConfig = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.resolve('./', 'dist'),
        port: 8090,
        open: true
    }
};

module.exports = merge(commonConfig, devConfig);

webpack.common.js的内容如下：（注意：不要配置resolve: extensions）

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    entry: {
        index: path.resolve('./', 'src/index.js')
    },
    output: {
        filename: '[name].js',
        path: path.resolve('./', 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [["@babel/preset-env", {
                            "useBuiltIns": 'usage',
                            "corejs": 2    //对应上面的core.js的配置
                        }]]
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve('./', 'src/temp/index.html'),
            filename: 'index.html',
            hash: true,
            minify:{
                caseSensitive: false,                       //是否大小写敏感
                removeComments:true,                        // 去除注释
                removeEmptyAttributes:true,                 // 去除空属性
                collapseWhitespace: true                    //是否去除空格
            }
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [path.resolve('./', 'dist')]
        })
    ]
};

webpack.pro.js的内容如下

let merge = require('webpack-merge');
let commonConfig = require('./webpack.common');
let proConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',

};
module.exports = merge(commonConfig, proConfig);

 9、webpack 中的 code-spliting（代码分割）

添加配置如下：

optimization: {
    splitChunks: {
        chunks: "all"
    }
},

代码分割与webpack无关，只是为了让网页响应速度更快

其实webpack底层应用了SplitChunksPlugin插件对代码进行分割（常用配置如下）：

optimization: {
    //默认配置如下：
    splitChunks: {
        chunks: "async",        //async: 对异歩加载的文件进行分割，all对全部文件，initial对同步代码做分割
        minSize: 30000,         //开始化割的起点大小 这里的30000表示Bite
        maxSize: 0,             //这个选项可配也可不配置，如果配置了，那么会对分割好的代码进行二次分割，通常不配置
        minChunks: 1,           //表示代码被调用了几次时进行代码分割
        maxAsyncRequests: 5,    //表示同时加载的类库是5个，如果多于5个的时候就不会进行代码分割了
        maxInitialRequests: 3,  //表示入口文件进行加载的时候，入口文件引入的库做代码分割最多只能分割出3个，多则不会进行分割了
        automaticNameDelimiter: '~', //文件名连接符
        name: true,             //在cacheGroups里取的filename有效， 一般不会去更改这个配置
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,     //判断第三方库是否是通过npm安装到node_modules下面，如果是则进行打包,打包生成的名字是vendor~name, 表示入口文件
                priority: -10,                       //表示优先级，越是优先级越高在符合条件的情况下，就会被打包到对应的目录下
                filename: 'vendors.js'               //如果配置了该选项表示把所有的文件全部打包到vendors.js文件下
            },
            default: {                              //表示当打包条件满足的情况下，但是对应的js包又不在node_modules文件里面，那么就会走该配置
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true,           //表示已经被打包过了，那么就不再进行打包了
                filename: 'common.js'               //打包好的文件会旋转到common.js里面如果没有指定这个，则会生成default~name.js文件
            }
        }
    }
},

 10、Lazy Loading 懒加载

实现懒加载可以利用ES7的async...await来实现，具体应用实例如下

//实现懒加载的方法可以利用ES7里的async... await来实现
let getMethod = async () => {
    let { default: _} = await import ('lodash');
    console.log(_.add(2,3));
};

document.addEventListener('click', () => {
    getMethod();
}, false);

 注意动态加载的这个方法，在IE9-IE11浏览器下会报错，暂未找到有效的解决办法，不过以上方法可以在谷歌浏览器下正常运行

 11、CSS文件的代码分割

通常来讲，通过webpack来打包的css文件会被打包入js文件中，但是为了把js代码与css代码区别开，一般会把css文件和js文件进行分开打包， 这个时候就会用到MiniCssExtractPlugin这个插件来操作，并且从webpack4.0开始官方就推荐使用该插件

安装

npm i mini-css-extract-plugin --save-d

注意：这个插件是不支持热更新，也就是说，当进行了更改后，必需手动的去刷新页面来查看效果， 所以一般配置上线的时候才会进行配置

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let merge = require('webpack-merge');
let commonConfig = require('./webpack.common');
let proConfig = {
    mode: 'production',
    // devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,    //在把包环境中把style-loader替换成这个loader
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',                     //引用的css文件的名称
            chunkFilename: '[name].chunk.css',          //在直接引用的css文件中间接引入的文件
            ignoreOrder: false                          //禁用警告
        })
    ]

};
module.exports = merge(commonConfig, proConfig);

注意：以上打包的css文件是没有进行压缩的，如果想要对css文件进行压缩，那么需要引入 optimize-css-assets-webpack-plugin这个插件

//安装
npm i  optimize-css-assets-webpack-plugin --save-d

在production环境中：

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //引入css样式压缩插件
let merge = require('webpack-merge');
let commonConfig = require('./webpack.common');
let proConfig = {
    mode: 'production',
    // devtool: 'cheap-module-source-map',
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})],           //实现css样式压缩
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,    //在把包环境中把style-loader替换成这个loader
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',                     //引用的css文件的名称
            chunkFilename: '[name].chunk.css',          //在直接引用的css文件中间接引入的文件
            ignoreOrder: false                          //禁用警告
        })
    ]

};
module.exports = merge(commonConfig, proConfig);

 12、webpack与浏览器缓存的关系

在线上环境，当浏览器访问一个页面的时候，会对页面的库文件等进行缓存，这样当页面的更新的时候，会导致浏览器那边没有变化 ，原因是浏览器用的是缓存的旧

的代码，为了解决这个问题，可以在production的模式下配置出口文件的hash值，这个hash值且必需和内容相关联的，即contenthash，具体如下

output: {
    filename: '[name].[contenthash].js',
    chunkFilename: "[name].[contenthash].chunk.js",
}

 13、webpack中不兼容老的版本之间引入的的依赖问题

在一些老版本的库中，会对一些公共的工具类产生依赖，但是程序一般不会到node_modules中去更改旧的库文件，这个时候就需要一个中间件，帮忙引入所依赖的库

具体配置如下：

let webpack = require('webpack');       //首先引入webpack这个方法

plugins: [
    ...
    new webpack.ProvidePlugin({
        $: 'jquery',                        //表示当出现$这个符号时，会自动引入Jquery这个包
        yf: ['jquery', 'merge']             //表求当出现yf这个符号时，会自动引入jquery并且调用里面的merge这个方法
    })
]

注意：在模块中的this是指定object的，并非指向window,如果有需要的情况下，可以改变全部的this指向，这个时候就需要安装imports-loader这个模块并且添加到module中，如果有安装babel依赖，那么就可以放在其后面，具体语法 loader: 'imports-loader? this=>window';

 14、环境变量的使用

环境变量即在使用webpack进行配置的时候可以定义一些全局变量，配置会根据在全局范围内配置的变量进行全局调用

比如在package.json中配置一个set变量

  "scripts": {
    "test": "webpack --config ./build/webpack.dev.js",
    "start": "webpack-dev-server --env.set=areyouok --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.pro.js"
  },

那么调用的时候

module.exports = env => {
    console.log(env.set);       //在打包的时候就会输出这个值，如果没有设定值，默认就会是true
    return merge(commonConfig, devConfig);
};        

可以利用这个特性，在打包环境中配置一个变量，这样就可以根据变量的值的变化自动选择打包的环境，如下：

 15、library 工具库打包的注意点 

通常来讲如果打包工具库方便别人的调用，会在output那进行配置，需要添加的配置有：

externals: ['lodash'],     //如果库有第三方依赖的情况下，假定以lodash为例，那么就可以把lodash排除在外，无需打包到库里，祥细配置见官网
output: {
    path: path.resolve('./', 'dist'),
    library: 'library',     //添加这个配置后可以通过<script src ='library.js'></script>进行引入
    libraryTarget: 'umd'    //添加这个配置后可以通过import library from 'library', let library from 'library'进行引入
},

 16、typescript配置

a、在作用typescript的时候必需安装typescript可以使用以下命令

npm i typescirpt --save-d

b、在搭建好webpack环境后安装ts-loader使用以下命令

npm i ts-loader --save-d

c、在项目中进行typescript的项目初始化 tsc --init生成tsconfig文件

在webpackconfig中添加配置

{
    test: /.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/
},

注意：在使用一些js的库时需要引入typescript版本的可能用以下方法

//查询 以jquery为例
npm view @types/jquery versions
//安装
npm i @types/jquery --save-d

 如果在webpack中使用typescript开发node,那么还需要在webpack中添加配置target: 'node', 同时修改配置如下图：

17、使用webpackDevServer进行请求打包

在开发环境中，为了更好的进行测试，就需要引入一些测试数据，但是正式代码中的ajax请求的地址一般不进行随便更改，这个时候就需要引入devServer中的proxy进行请求的代理

假如请求的代码如下

import axios from 'axios';
axios.get('/learn/test.php').then((res) => {
    console.log(res);
}).catch(error => {
    console.log(error);
});

那么在proxy中实际要转接是http://localhost:80/learn/test.php,那么可以做如下配置

devServer: {
    contentBase: path.resolve('./', 'dist'),
    port: 8090,
    open: true,
    proxy: {
        '/learn': 'http://localhost:80'
    }
},

注意以上代码会进行一次拼接，即返回地址：'http://localhost:80/learn' 对get请求里的 '/learn' 进行替换即在开发环境中实际请求的是'http://localhost:80/learn/test.php'这个地址；

如果进行比较完整性的配置

devServer: {
    contentBase: path.resolve('./', 'dist'),
    port: 8090,
    open: true,
    proxy: {
        '/api': {
            target: 'http://localhost:80/',     //想要请求的数据地址
            pathRewrite:{
                '^/api': '',                     //通常拼接后的数据地址是http://localhost:80/learn,如果想拼接为http://localhost:80即可做该替换
                'header.json': 'data.json',      //表示遇到header.json时转成请求data.json
            },
            secure: false,                      //表示接受运行在 HTTPS 上，且使用了无效证书的后端服务器的数据
            changeOrigin: true,                 //通常该选项会配置成true
            header: {                           //如果想要通过请求头携带验证信息，那么可以配置该参数
                cookie: '123456'
            }
        }
    }
},

如果想要进行多个配置，那么可以改成以下写法

devServer: {
    contentBase: path.resolve('./', 'dist'),
    port: 8090,
    open: true,
    proxy: [{
        context: ['/learn'],
        target: 'http://localhost:80'
    }]
},

20、在vue-cli3中可以进行简单的配置

let path = require('path')
module.exports = {
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  chainWebpack: config => {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src')).set('_c', path.resolve(__dirname, 'src/components'))
  },
  productionSourceMap: false
}