webpack配置进阶

打包多页应用

我们可以配置根据不同的入口文件，打出不同的包

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        home: './src/home.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'home.html',
            template: './index.html',
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
            filename: 'other.html',
            template: './index.html',
            chunks: ['other']
        })
    ]
}

上述代码就是将两个入口home.js和other.js分别进行打包，生成对应的html文件，并且引入对应的代码块

source-map

我们的代码会转化成低版本的代码，并且进行代码压缩在生产环境下，如果代码出错了我们很难找到对应哪行代码出错了，这个时候我们需要配置source-map，这里有四种配置方法，我们分别来介绍一下

 devtool: 'source-map' //会单独产生一个map文件，可以映射出行和列，缺点是有点大
 devtool: 'eval-source-map' //不会产生一个map文件，可以映射出行和列
 devtool: 'cheap-module-source-map' //会单独产生一个map文件，可以映射出行，不会产生列
 devtool: 'cheap-module-eval-source-map' //不会单独产生一个map文件，可以映射出行，不会产生列

watch

我们可以设置每隔一段时间自动触发webpack打包

watch: true,
watchOptions: {
    poll: 1000, //每1秒触发一次
    aggregateT0imeout: 500, //防抖，如果我一直输入代码的话不触发
    ignored: /node_modules/, //排查监控哪个文件
}

跨域

配置webpack跨域

devServer: {
    proxy: {
        '/api': { // 客户端访问/api开头的接口会代理到对应的接口域名
            target: 'xxx', //接口域名
            pathRewrite: {
                '/api': ''
            }
        }
    }
}