webpack打包提取css到独立文件

将本来镶嵌在bundle.js的css转到外面来，我们需要用到一个插件：extract-text-webpack-plugin

使用方法：

1.安装

npm i extract-text-webpack-plugin -D

2.配置

let extractPlugin = require('extract-text-webpack-plugin');

//....

plugins:[

    new extractplugin('css/index.css')

],

module:{

    rules:[

        {

            text: /\.scss$/,

            use: extractPlugin.extract({

                use: ['css-loader','sass-loader'],

                fallback: 'style-loader'

            })

        }

    ]

}

在plugins只是new了一个插件实例，loader部分的fallback就是将style-loader的输出接口接到index.css上。

这样我们就可以将css的代码都取出来放在css/index.css里面了，同时插件能自动添加index.css的引入到html的头部

巴特西

webpack打包提取css到独立文件

最新文章

热门文章