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

//复用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.js',
        path: resolve(__dirname, 'build')
    },
    module:{
        rule:[
            {
                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'
                                }
                            }
                        ]
                    ]
                }
            },
            //处理图片
            {
                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.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'
}