本篇文章给大家带来的内容是关于css文件实现分离的插件（extract-text-webpack-plugin）的用法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css分离：extract-text-webpack-plugin1、安装该插件：
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 } }] } ] },
5、使用webpack进行打包
publicpath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的
在处理前需要在webpack.config.js上方声明一个website对象
注意：这里的ip和端口是本机的ip或者是你devserver配置的ip和端口 //==publicpath里面的内内容一定要写正确：用ipconfig查看电脑的ip地址，然后冒号后面跟自己设置的端口==
注意：虽然把css文件分离出来了，但是css路径不对
用==publishpath==来解决
var website={ publicpath:"http://192.168.1.108:1717"}
6、在output选项中引用这个对象的publicpath属性
//出口文件的配置项output:{ //输出的路径，用了node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'[name].js', publicpath:website.publicpath},
7、使用webpack进行打包，这时原来的相对路径就会变为绝对路径（绝对路径速度会更快）
*若出现下列错误，说明ip没写对> y@1.0.0 server f:\weblearn\webpacklearn> webpack-dev-serverevents.js:183 throw er; // unhandled 'error' event ^error: listen eaddrnotavail 10.212.109.18:8087 at object._errnoexception (util.js:992:11) at _exceptionwithhostport (util.js:1014:20) at server.setuplistenhandle [as _listen2] (net.js:1338:19) at listenincluster (net.js:1396:12) at dolisten (net.js:1505:7) at _combinedtickcallback (internal/process/next_tick.js:141:11) at process._tickcallback (internal/process/next_tick.js:180:9) at function.module.runmain (module.js:695:11) at startup (bootstrap_node.js:191:16) at bootstrap_node.js:612:3npm err! code elifecyclenpm err! errno 1npm err! y@1.0.0 server: `webpack-dev-server`npm err! exit status 1npm err!npm err! failed at the y@1.0.0 server script.npm err! this is probably not a problem with npm. there is likely additional logging output above.npm err! a complete log of this run can be found in:npm err! c:\users\勾丽娜\appdata\roaming\npm-cache\_logs\2018-07-11t07_46_12_914z-debug.logps f:\weblearn\webpacklearn>
修改好正确的ip地址就可以运行成功了，哈哈
相关推荐：
css文件如何进行打包？css文件打包的方法
html文件如何打包 ？html文件打包的方法介绍
以上就是css文件实现分离的插件（extract-text-webpack-plugin）的用法的详细内容。