webpackstudy/25/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')
/**
 * PWA 渐进式网络开发应用程序
 * workbox --> workbox-webpack-plugin
 * package.json中eslintConfig需配置如下：
 * "env":{
      "browser": true //可以使用浏览器全局变量
    }
    必须运行在服务器上
 */
//复用loader
const commonCssLoader = [
    MiniCssExtractPlugin.loader, //提取css
    'css-loader',
    {
        loader: 'postcss-loader', //兼容性处理
        options: {
             // 旧版本配置
            /* ident: 'postcss', 
            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/,
                    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'
}