webpack 样式打包

const path = require('path');
module.exports = {
    mode: 'production', //production压缩的代码默认值  development未压缩的代码
    entry: {
        main: './src/index.js',
    },
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]', //引用路径打包后得到图片名,名字+hash_type
                        outputPath: 'images/', //如果文件体积等于或大于限制，默认情况下将使用 file-loader 并将所有参数传递给它。
                        limit: 1024000 //以字节为单位
                    }
                }
            },
            {
                test: /\.(ttf|eot|svg)$/, //字体文件使用file-loader打包就可以了
                use: {
                    loader: 'file-loader',
                }
            },
            {
                test: /\.(css|scss|sass)$/,
                use: [ //从下往上执行打包
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2, //使用@import的文件也要走sass-loader和postcss-loader两个步骤 
                            modules: true, //模块化css文件
                        }
                    },
                    'sass-loader',
                    'postcss-loader', //使用了添加浏览器厂商前缀
                ],
            },
        ]
    }
}

postcss.config.js添加文件

module.exports = {
    plugins: [
        require('autoprefixer') //使用 autoprefixer 添加厂商前缀。
    ]
}