webpackstudy/21/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'

/**
 * 缓存：
 *  babel缓存
 *      cacheDirectory： true
 *      第二次打包速度更快
 *  文件资源缓存 -- 上线代码性能优化
 *      hash值: 全部文件名修改，而且每次打包都会改变。
 *      chunkhash：根据chunk生成hash值，当打包来源于同一个chunk，hash值会一样。所以js中引入css是一个chunk，都会变化。
 *      contenthash：内容不变时，hash不变，所以不同文件，hash值不一样。
 */
//复用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
            }
        })
    ],
    mode:'production',
    devtool:'source-map'
}