[摘要]本篇文章给大家带来的内容是关于css文件实现分离的插件（extract-text-webpack-plugin）的用法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css分离：ex...
本篇文章给大家带来的内容是关于css文件实现分离的插件（extract-text-webpack-plugin）的用法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css分离：extract-text-webpack-plugin
1、安装该插件：
for webpack 1
npm install –save-dev extract-text-webpack-plugin@1.0.1
for webpack 2
npm install –save-dev extract-text-webpack-plugin@2.1.2
for webpack 3
npm install –save-dev extract-text-webpack-plugin
for webpack 4
npm i extract-text-webpack-plugin@next -D
2、在webpack-config.js中引入插件
const extractTextPlugin=require(“extract-text-webpack-plugin”);
3、配置plugins:这里new一下这个对象，与上面那个配置插件用逗号分隔
new extractTextPlugin(“/css/index,.css”)
4、这里的/css/index.css是分离后的路径位置。这部配置完成后，包装代码：还要修改原来我们的style-loader和css-loader
[x] 修改代码如下：
module:{ rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{ test:/\.(png jpg gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
},