automatically-separate-css-to-independent-file.md

自动分离CSS到独立文件

使用extract-text-webpack-plugin插件分离CSS代码到单独文件。

安装

npm i extract-text-webpack-plugin@2 --save-dev

配置

修改webpack.config.js文件，添加如下内容：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 包含插件

const plugin = new ExtractTextPlugin({
    filename: '[name].css',
    ignoreOrder: true,
});

const config = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: plugin.extract({
                    use: {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                    fallback: 'style-loader',
                }),
            },
        ],
    },
    plugins: [
        // ...
        plugin,
    ],
};

module.exports = config;

测试

访问编译好的页面可以查看到css被分离成单独的文件。