Webpack的基础配置你还记得哪些？

# 入口 entry

entry有三种写法，如下：

module.exprots = {
  // 法一：string
  entry: './src/index.js',
  // 法二：array
  entry: ['./src/index.js', './src/home.js', ...],
  // 法三：object
  entry: {
    index: './src/index.js',
    home: './src/home.js',
    ...
  }
}

特点

1. string：单入口
   打包形成一个chunk，输出一个bundle文件 此时chunk的默认名称时main

2. array：多入口
   所有入口文件最终只会形成一个chunk，只输出一个bundle文件 一般只有在HMR功能中让html热更新生效时使用

3. object：多入口
   有几个入口文件就会生成几个chunk，并输出几个bundle文件 此时chunk的名称是键名key

# 出口 output

module.exprots = {
    output: {
        // 输出的文件名称
        filename: 'js/[name].[hash].js',
        // 输出文件的目录，也是所有输出资源的公共目录
        path: resolve(__dirname, 'dist'),
        // 所有资源引入公共路径前缀
        publicPath: '/',
        // 非入口chunk的名称 (不咋常用)
        // 类似 import '@/assets/test.js' 导入的都会被重名
        chunkFilename: js/[name]_chunk.js,
        // 将整个库向外暴露的变量名，一般用于封装 js 库的时候
        // library: [name], 
        //结合 library 将变量添加到哪
        // libearyTarget: 'window', // global、 commonjs
    }
}

# module 用于 loader 配置

module.exprots = {
    module: {
        rules: [
            {
                test: /\.css$/,
                // 多个 loader 用 use
                use:['style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                // 排除 node_modules 下的 js
                exclude: /node_modules/,
                // 只检查 src 下的 js 文件
                include: resolve(__dirname, 'src'),
                // 优先执行
                // enforce: 'pre',
                // 延后执行
                // enforce: 'post',
                // 单个 loader 用 loader
                loader: 'eslint-loader',
                options:{
                    // 输出的名字取哈希值的前10位，并保留之前的扩展名
                    name:[hash: 10].[ext],
                    // 输出到 js 文件夹
                    outputPath: 'js',
                    // ... 其他的配置
                }
            }
        ]
    }
}

# resolve 解析模块的规则

module.exprots = {
    resolve: {
        // 配置解析模块路径别名
        // ../../../js/index.js 可简写 $js/index.js
        alias: {
            $js: path.resolve(__dirname, 'src/js')
        },
        // 配置省略文件路径的后缀名
        // import '../css/index.css' 可简写 import '../css/index'
        extensions:['.js','.json','.css','.vue', ...],
        // 告诉webpack解析模块去哪里找
        modules:[path.resolve(__dirname, '../../node_modules'),'node_modules']
    }
}

# devServer 开发环境服务器配置

module.exprots = {
    devServer:{
        host: 'localhost', //域名
        port: 8888, // 端口号
        open: tuue, // 自动打开浏览器
        hot: true, // 开启HMR功能
        compress: true, // 启动gzip压缩
        clientLogLevel: 'none', //不显示启动服务器日志
        quiet: true, // 除基本启动信息外不显示其他内容
        overlay: false // 出错时不全屏展示
        // 解决开发环境的跨域代理
        proxy: {
            '/api':{
                // 指定代理的服务器地址
                target: 'http://xxx.xxx.xxx:8080',
                // 这个参数可以让target参数是域名
                changeOrigin: true,
                // 重写路径
                pathRewrite:{
                    '^/api': ''
                }
            }
        }
    }
}

# optimization

const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exprots = {
    optimization:{
        splitChunks:{
            chunk: 'all',
            // -- 以下是默认值 --//
            minSize: 30 * 1024, // 分隔的chunk的大小最小为 30kb
            maxSize: 0, // 最大没有限制
            minChunks: 1, // 压提取的chunk最好被引用 1 次
            maxAsyncRequests: 5, // 按需加载是并行加载的文件最大数量
            maxInitialRequests: 3, // 入口 JS 文件最大并行请求数量
            automaticNameDelimiter: '~', // 名称连接符
            name: true, // 可以使用命名规则
            cacheGroups: {
                // 分隔chunk的组
                // node_modules文件会被打包到 vendors 组的 chunk 中
                // 即 vendors~xxx.js
                // 满足上面的公共规则：大小超过 30kb，只要被引用一次
                vendors:{
                   test: /[\\/]node_modules[\\/]/,
                   priority: -10 // 优先级
                },
                default:{
                    minChunks: 2, // 要提取的 chunk 最好被引用 2 次
                    priority: -20, // 优先级
                    // 如果当前要打包的模块和之前已经被提取的模块是同一个
                    // 就复用而不是重新打包
                    reuseExistingChunk: true
                }
            }
        },
        // 当前模块的记录其他模块的hash单独打包为一个文件runtime
        // 解决的问题：修改A文件导致B文件的contenthash变化
        runTimeChunk: {
            name: entrypoint => `runtime-${entrypoint.name}`
        },
        // 配置生产环境的压缩方案：js / css
        // 依赖 terser-webpack-plugin 插件，得提前安装
        minimzer:{
            new TerserWebpackPlugin({
                cache: true, // 开启缓存
                parallel: true, // 开启多进程打包
                sourceMap: true // 启用source-map
            });
        }
    }

}