webpack

/**
 * webpack的配置文件
 * * 所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs
 */
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')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'development';

const commonCssLoader = [
    // 'style-loader',
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: '../'  // 解决css中图片路径问题
        }
    }, // 将js中的css提取，取代style-loader
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                // postcss的插件
                require('postcss-preset-env')(),
            ],
        },
    },
];
module.exports = {
    // 开发环境和生产环境的差别
    // 开发环境：能让代码本地调试运行的环境。源码（es6，less, etc.） -> webpack -> bundle (自动化)
    // 生产环境：能让代码优化上线运行的环境。css -> js（闪屏，大 -> 提取）；代码压缩；样式和js兼容
    mode: 'development',
    // mode: 'production',
    entry: './src/index.js',
    output: {
        // 输出文件资源目录
        path: resolve(__dirname, 'dist'),
        // 指定名称+目录
        filename: 'bundle.[contenthash].js',
    },
    module: {
        rules: [
            // 在package.json中eslintConfig --> airbnb
            {
                test: /\.js/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                // 优先执行
                enforce: 'pre',  // post 延后执行
                options: {
                    // 自动修复
                    fix: true,
                },
            },
            {
                // 以下loader只会匹配一个
                // 优化生产环境构建打包速度
                // 注意：不能有两个配置处理同一个类型文件
                oneOf: [
                    // less-loader 将less文件编译成css文件
                    // css-loader 将css文件变成commonjs模块加载js中，内容是样式字符串
                    // style-loader 创建style标签，将js中的样式资源插入，添加到head中生效
                    {
                        test: /\.css$/,
                        use: [...commonCssLoader],
                    },
                    {
                        test: /\.less$/,
                        use: [...commonCssLoader, 'less-loader'],
                    },
                    {
                        test: /\.(png|jpg|jpeg|gif)/,
                        loader: 'url-loader',
                        options: {
                            // 图片大小小于8kb，就会被base64处理
                            // 优点：减少请求数量（减轻服务器压力）
                            // 缺点：图片体积会更大（文件请求速度更慢）
                            limit: 30 * 1024,
                            // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                            // 解析时会出问题：[object Module]
                            // 解决：关闭url-loader的es6模块化，使用commonjs解析
                            esModule: false,

                            // 给图片进行重命名
                            // [hash:10] 取图片hash的前10位
                            // [ext] 取文件原来的扩展名
                            name: '[hash:10].[ext]',
                            outputPath: 'images',
                        },
                    },
                    {
                        test: /\.html/,
                        // 处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
                        loader: 'html-loader',
                    },
                    // {
                    //     exclude: /\.(css|html|js|less)/,
                    //     loader: 'file-loader'
                    // }
                    {
                        test: /\.(ttf|eot|woff|woff2|svg)$/i,
                        use: [{
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts',
                            },
                        }, ],
                    },
                    {
                        test: /\.js/,
                        exclude: /node_modules/,
                        use: [
                            /**
                             * 开启多进程打包
                             * * 进程启动大概为600ms，进程通信也有开销
                             * * 只有工作消耗时间比较长，才需要多进程打包
                             */
                            {
                                loader: 'thread-loader',
                                options: {
                                    workers: 2 // 进程2个
                                }
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                    // 预设：指示babel做怎样的兼容性处理
                                    presets: [
                                        [
                                            '@babel/preset-env',
                                            {
                                                // 按需加载
                                                useBuiltIns: 'usage',
                                                // 指定core-js版本
                                                corejs: {
                                                    version: 3,
                                                },
                                                // 指定兼容性做到哪个版本浏览器
                                                targets: {
                                                    chrome: '60',
                                                },
                                            },
                                        ],
                                    ],
                                    // 开启babel缓存
                                    // 第二次构建时，会读取之前的缓存
                                    cacheDirectory: true,
                                },
                            }
                        ]
                    },
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            // 压缩
            minify: {
                // 去空格
                collapseWhitespace: true,
                // 删注释
                removeComments: true,
            },
        }),
        // 提取css
        new MiniCssExtractPlugin({
            filename: 'css/main.[contenthash].css',
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),
        new WorkboxWebpackPlugin.GenerateSW({
            // 1. 帮助serviceworker快速启动 2. 删除旧的serviceworker
            // 生成一个serviceworker配置文件
            clientClaim: true,
            skipWaiting: true,
        }),
    ],
    // 开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：npx webpack-dev-server
    devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'dist'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
        // HMR
        hot: true,
    },

    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
    // 配置某些包不参与打包
    externals: {
        jquery: 'jQuery'
    },
    devtool: 'source-map',
};

output: {
        // 输出文件资源目录
        path: resolve(__dirname, 'dist'),
        // 指定名称+目录
        filename: 'js/[name].js',
        //所有资源引入公共路径前缀
        publicPath: '/',
        // 非入口chunk的名称
        chunkFilename: 'js/[name]_chunk.js',
        libraray: '[name]',  // 整个库向外暴露的变量名
        // libraray: 'window',  // 变量名添加到browser
        // libraray: 'global',  // 变量名添加到node
        // libraray: 'commonjs/amd'
}

devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'dist'),
    // 监视contentBase目录下的所有文件，一旦文件变化就回reload
    watchContentBase: true,
    watchOptions: {
        // 忽略文件
        ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口
    port: 5000,
    // 域名
    host: 'localhost',
    // 开启HMR
    hot: true,
    // 自动打开浏览器
    open: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错，不要全屏提示
    overlay: false,
    // 服务器代理：解决开发环境跨越问题
    proxy: {
        '/api': {
            // 一旦（5000）服务器接收到/api/xxx请求，就会把请求转发到另一个服务器（3000）
            target: 'http://localhost:3000',
            // 发送请求时，请求路径重写： 将/api/xxx --> /xxx （去掉/api）
            pathRewrite: {
                '^/api': ''
            }
        }
    }
}

optimization: {
    splitChunks: {
        chunks: '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~xx.js
        //     // 满足上面的公共规则，如：大小超过30kb，至少被引用一次
        //     vendors: {
        //         test: /[\\/]node_modules[\\/]/,
        //         // 优先级
        //         priority: -10
        //     }，
        //     default: {
        //         // 要提取的chunk最少被引用2次
        //         minChunks: 2,
        //         // 优先级
        //         priority: -20,
        //         // 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
        //         reuseExistingChunk: true
        //     }
        // }
    }，
    // 将当前模块记录其他模块的hash单独打包为一个runtime文件
    // 解决：修改a文件导致b文件的contenthash变化
    runtimeChunk: {
        name: entrypoint => `runtime-${entrypoint.name}`
    }，
    minimizer: [
        // 配置生产环境的压缩方案：js和css
        new TerserWebpackPlugin({
            // 开启缓存
            cache: true,
            // 开启多进程打包
            parallel: true,
            // 启动source-map
            sourceMap: true
        })
    ]
}

    plugins: [
        new WorkboxWebpackPlugin.GenerateSW({
            // 1. 帮助serviceworker快速启动 2. 删除旧的serviceworker
            // 生成一个serviceworker配置文件
            clientClaim: true,
            skipWaiting: true,
        }),
    ]

    // 注册serviceworker（处理兼容性问题）
    if('serviceWorker' in navigator){
        window.addEventListener('load', ()=>{
            navigator.serviceworker.register('/service-worker.js')
            .then(()=>{})
            .catch(()=>{})
        })
    }

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

    devtool: 'source-map'

    {
        loader: 'babel-loader',
        options: {
            // 预设：指示babel做怎样的兼容性处理
            presets: [
                [
                    '@babel/preset-env',
                    {
                        // 按需加载
                        useBuiltIns: 'usage',
                        // 指定core-js版本
                        corejs: {
                            version: 3,
                        },
                        // 指定兼容性做到哪个版本浏览器
                        targets: {
                            chrome: '60',
                        },
                    },
                ],
            ]
        }
    }

// 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
{
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: () => [
            // postcss的插件
            require('postcss-preset-env')(),
        ],
    },
},

// package.json
"browserslist": {
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ],
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ]
},

// inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from './inner';
export { inner }

// user.js
import * as module from './module';
console.log(module.inner.a);

import { something } from './something';

function usingSomething() {
    return something;
}

export function test() {
    return usingSomething();
}

// webpack 4
miniSize: 30000;

// webpack 5
miniSize: {
    javascript: 30000,
    style: 50000
}

// 配置缓存
cache: {
    // 磁盘存储
    type: "filesystem",
    buildDependencies: {
        // 当配置修改时，缓存失效
        config: [__filename]
    }
}