webpackstudy/10/webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//设置node环境变量
process.env.NODE_ENV = 'development'

module.exports = {
    entry: './src/js/index.js',
    output:{
        filename:'js/bulit.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    //取代style-loader,提取js中css成单独文件
                    MiniCssExtractPlugin.loader,
                    // 创建style标签，将样式放入
                    //'style-loader',
                    // 将css文件整合到js中
                    'css-loader',
                    /**
                     * css 兼容性处理 postcss-loader postcss-preset-env
                     * "browserslist":{
                            "development":[
                                "last 1 chrome version",
                                "last 1 firefox version",
                                "last 1 safari version"
                            ],
                            "production":[
                                ">0.2%",
                                "not dead",
                                "not op_mini all"
                            ]
                        }
                     * 使用loader默认配置
                     * 'postcss-loader',
                     * 修改loader配置
                     */
                    {
                        loader: 'postcss-loader',
                        options: {
                             // 旧版本配置
                            /* ident: 'postcss', 
                            plugins: () => [
                                require('postcss-preset-env')()  //读取package.json里browserslist配置，默认加载根据node_env加载production
                            ] */
                            postcssOptions: {
                                plugins: [
                                  [
                                    'postcss-preset-env'
                                  ],
                                ],
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'   //重命名
        })
    ],
    mode:'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    }
}