webpack学习笔记

基本配置

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 封装css相关的一些loader，因为对css文件和less文件的处理中有重复
const commonCssLoader = [
    // 'style-loader',
    // 取代style-loader，提取js中的css为单独文件，使用这个插件处理的话，css就不是以style标签插入而已以link标签插入，不会闪屏
    MiniCssExtractPlugin.loader,
    'css-loader',
    // css兼容性处理：postcss --> postcss-loader postcss-preset-env
    // 帮postcss找到package.json中browserslist里的配置，通过配置加载指定的css兼容性样式
    // 默认设置的生产环境，设置开发环境要改变node环境变量：process.env.NODE_ENV = 'development';
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                require('postcss-preset-env')()
            ]
        }
    }
]

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        filename: 'build.js',
        // resolve拼接绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader
    module: {
        rules: [{
            // 处理less文件
            test: /\.less$/,
            use: [
                ...commonCssLoader,
                'less-loader'
            ]
        },
        {
            // 处理css文件
            test: /\.css$/,
            use: [...commonCssLoader]
        },
        {
            // 处理图片文件
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
                // 小于8k的图片会转换成base64
                limit: 8 * 1024,
                // 重命名
                name: '[hash:10].[ext]',
                // 由于html-loader遵循的是commonjs，这里要关掉es6
                esModule: false
            }
        },
        {
            // 处理HTML中的img图片
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            // 处理其他文件
            exclude: /\.(html|js|css|less|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
                name: '[hash:10].[ext]'
            }
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            // 同一个文件适用多个loader的时候，enforce让其优先执行，避免一些错误
            // enforce: 'pre',
            use: [{
                // 语法检查：需要eslint-loader eslint
                // 只检查自己写的源代码
                // 设置检查规则去package.json中的eslintConfig
                // 为了使用airbnb规则，还需要eslint-config-airbnb-base和eslint-plugin-import
                loader: 'eslint-loader',
                options: {
                    // 自动修复
                    fix: true
                }
            },
            {
                // js兼容性处理：babel-loader @babel/core
                // 1. 基本兼容性处理，只能转换基础语法 --> @babel/preset-env
                // 2. 全部js兼容性处理，直接在源代码引入 --> @babel/polyfill
                // 但是这种方法提导致文件体积太大
                // 3. 按需加载 ，此时不能引入@babel/polyfill --> corejs
                loader: 'babel-loader',
                options: {
                    // 预设，指示babel做怎样的兼容性处理
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需下载
                                useBuiltIns: 'usage',
                                // 指定core-js版本
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性做到哪个版本的浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '50',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }]
            
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 内容
            template: './src/index.html',
            // 压缩HTML代码
            minify: {
                // 折叠空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            // 对输出的文件重命名
            filename: 'build.css'
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    // 模式为production时自动压缩js代码
    mode: 'development',
    devServer: {
        // 热更新
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
}

性能优化

开发环境性能优化

• 优化打包构建速度 HMR
• 优化代码调试 source-map

生产环境性能优化

• 优化打包构建速度
• 优化代码运行的性能