webpackstudy/26/webpack.config.js

const { resolve } = require("path");
//提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
//js语法检查
const EsLintPlugin = require('eslint-webpack-plugin')
//html资源处理
const HtmlWebpackPlugin = require('html-webpack-plugin')
//设置node环境变量 postcss-loader会根据它读取package.js里的browserslist配置
process.env.NODE_ENV = 'development'
//
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
/**
 * 
 */
//复用loader
const commonCssLoader = [
    MiniCssExtractPlugin.loader, //提取css
    'css-loader',
    {
        loader: 'postcss-loader', //兼容性处理
        options: {
             // 旧版本配置
            /* ident: 'postcss', s
            plugins: () => [
                require('postcss-preset-env')()  //读取package.json里browserslist配置，默认加载根据node_env加载production
            ] */
            postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env'
                  ],
                ],
            }
        }
    }
]

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    module:{
        rules:[{
            // 以下loader只会匹配一个 提高效率
            // 注意：不能有两个配置处理同一种文件
            oneOf:[
                {
                    test:/\.css$/,
                    use: [
                        ...commonCssLoader
                    ]
                },
                {
                    test:/\.less$/,
                    use:[
                        ...commonCssLoader,
                        'less-loader'
                    ]
                },
                {  //兼容性处理
                    test:/\.js$/,
                    exclude: /node_modules/,
                    use:[
                        //开启多进程打包
                        /**
                         * 进程启动大概600ms
                         * 进程通信也需开销
                         * 所以适合工作消耗事件比较长，需要多进程打包
                         */
                        //'thread-loader',
                        {
                            loader: 'babel-loader',
                            options:{
                                // 预设：指示babel做怎样的兼容性处理
                                presets:[
                                    [
                                        '@babel/preset-env',
                                        {
                                            useBuiltIns: 'usage',
                                            corejs:{
                                                version:3
                                            },
                                            targets:{
                                                chrome: '60',
                                                firefox: '60',
                                                ie:'9',
                                                safari: '10',
                                                edge: '17'
                                            }
                                        }
                                    ]
                                ],
                                 //开启babel缓存
                                 // 第二次构建时，会读取之前的缓存
                                cacheDirectory: true 
                            } 
                        }
                    ]
                },
                //处理图片
                {
                    test:/\.(jpg|png|jpeg|gif)/,
                    loader:'url-loader',
                    options:{
                        limit:8*1024,
                        name:'[hash:10].[ext]',
                        outputPath:'imgs',
                        esModule: false,
                    }
                },
                //html 处理
                {
                    test:/\.html$/,
                    loader:'html-loader'
                },
                //其他资源处理
                {
                    exclude:/\.(js|css|less|html|jpg|jpeg|png|gif)/,
                    loader:'file-loader',
                    options:{
                        outputPath:'media',
                        esModule: false,
                        name: '[hash:10].[ext]'
                    },
                    type: 'javascript/auto'
                }
            ]
        }]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: 'css/built.[contenthash:10].css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new EsLintPlugin({
            extensions: ['js', 'json', 'coffee'],
            //exclude: '/node_modules/',
            fix:true
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        }),
        new WorkboxWebpackPlugin.GenerateSW({
            /**
             * 帮助sericeworker快速启动
             * 删除旧的serviceworker
             * 生成serviceworker配置文件  示例 ./src/js/index.js
             */
            clientsClaim: true,
            skipWaiting: true
        })
    ],
    mode:'production',
    devtool:'source-map'
}