webpack5 基本配置

一、拆分配置和merge

        将webpack配置文件拆分成三个。

        webpack.common.js: 用于设置基本配置。

        webpack.dev.js: 用于设置开发环境配置。

        webpack.prod.js: 用于设置生产环境配置。

        在dev和prod配置文件中引入基本配置

// ...
const webpackCommonConf = require('./webpack.common.js');
// ...

使用merge合并配置

module.exports = merge(webpackCommonConf, {
    // prod 或者 dev 环境下的配置

    // ...
},

二、启动本地服务

// ...
const webpackCommonConf = require('./webpack.common.js');
const { merge } = require('webpack-merge');

module.exports = merge(webpackCommonConf, {
    // ...

    devServer: {
        port: 8080,
        open: true,  // 自动打开浏览器
        client: {
            progress: true, // 开启进度条
        },
        compress: true,  // 启动 gzip 压缩
        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:9000/api/xxx
            '/api': 'http://localhost:9000',

            // 将本地 /api2/xxx 代理到 localhost:9000/xxx
            '/api2': {
                target: 'http://localhost:9000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }
})

三、处理ES6

        不同浏览器对于新的ES语法兼容性不同，需要将高版本的ES语法转换为不同浏览器都能兼容的版本。

        在基本配置中配置babel-loader，需要先安装依赖，babel-loader会将es语法进行兼容性转化。

// ....

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                    }
                ],
                include: srcPath,
                exclude: /node_modules/
            },
            // ...
        ]
    },
    // ....
}

四、处理样式

在基本配置文件中配置

// ....

module.exports = {
    // ...
    module: {
        rules: [
             {
                test: /\.css$/, // 处理css结尾的文件
                // loader 的执行顺序是：从后往前
                use: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss需要配置postcss.config.js
            },Ï
            // ...
        ]
    },
    // ....
}

loader 的执行顺序是：从后往前， css-loader用于处理css文件，将css文件打包到js中，配合style-loader使用，将css文件打包并插入到页面中。

postcss-loader用于给不同浏览器的css样式加上相应的前缀，需要配置postcss.config.js

如果使用的less，在css_loader前需要使用less-loader插件对less文件进行处理。

// ....

module.exports = {
    // ...
    module: {
        rules: [
             {
                Ïtest: /\.less$/i,
                use: [
                  // compiles Less to CSS
                  'style-loader',
                  'css-loader',
                  'less-loader',
                ],
            // ...
        ]
    },
    // ....
}

五、处理图片

如果是在测试的环境中， 需要安装对应插件file-loader或者url-loader

// webpack.dev.js

const webpackCommonConf = require('./webpack.common.js');

module.exports = merge(webpackCommonConf, {
    // ...

    module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'url-loader' // 也可以使用 file-loader， url-loader 更好
            }
        ]
    },

    // ...
})

如果是在生产环境中，可以配置的更加更详细

// webpack.prod.js

const webpackCommonConf = require('./webpack.common.js')

module.exports = merge(webpackCommonConf, {
    
    // ...
    
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况  
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader', // file-loader
                    options: {
                        // 小于 12kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 12 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.baidu.com'
                    }
                }
            },
        ]
    },
    

    // ...
})

六、模块化

// webpack.prod.js

const distPath = path.join(__dirname, '..', 'dist');
module.exports = merge(webpackCommonConf, {

    // ...    

    output: {
        filename: '[name].[contenthash:8].js', // 截取8会哈希
        path: distPath,
       // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },
   
  
    // ...
})

当内容不发生变化时，文件的哈希值不会发生改变，再次需要改文件时直接从缓存读取，如果内容发生了改变， 文件的哈希值也会发生改变，需要重新加载。