10. 分离css插件

以css配置示例,less与sass同理
1. 使用旧版的ExtractTextPlugin插件
安装
npm install [email protected] --save-dev
在webpack.config.js中配置
const extractTextPlugin=require('extract-text-webpack-plugin')
​
module.exports={
    //...code
    module:{
       rules:[{
            test:/\.css$/,
            use:extractTextPlugin.extract({
                fallback:"style-loader",
                use:['css-loader'],
                publicPath:"../"
            })
        }]
    },
    plugins:[
        new extractTextPlugin("./css/[name].css")//输出路径
    ]
}
如果还使用了根据css自动加前缀loader
const extractTextPlugin=require('extract-text-webpack-plugin')
​
module.exports={
    //...code
    module:{
       rules:[{
            test:/\.css$/,
            use:extractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [require('autoprefixer')]
                        }
                    }]
                publicPath: '../'
            })
        }]
    },
    plugins:[
        new extractTextPlugin("./css/[name].css")//输出路径
    ]
}
使用方法
配置完成后运行webpack打包即可
2.使用新版mini-css-extract-plugin 插件
安装
npm install mini-css-extract-plugin --save-dev
在webpack.config.js中配置
const miniCssPlugin=require('mini-css-extract-plugin');
module.exports={
    module:{
        rules:[
            {
                test:/\.css$/,
                use: [{
                    loader: miniCssPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            }
        ]
    },
    plugins:[
        new miniCssPlugin({
            filename:'./css/[name].css'
        })
    ]
}

9. 打包HTML文件

11. babel简单使用

Last modified 3yr ago