css文件怎么实现分离的插件

这篇文章主要为大家展示了“css文件怎么实现分离的插件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css文件怎么实现分离的插件”这篇文章吧。
　　1、安装该插件：
　　forwebpack1
　　npminstall–save-devextract-text-webpack-plugin@1.0.1
　　forwebpack2
　　npminstall–save-devextract-text-webpack-plugin@2.1.2
　　forwebpack3
　　npminstall–save-devextract-text-webpack-plugin
　　forwebpack4
　　npmiextract-text-webpack-plugin@next-D
　　2、在webpack-config.js中引入插件
　　constextractTextPlugin=require(“extract-text-webpack-plugin”);
　　3、配置plugins:这里new一下这个对象，与上面那个配置插件用逗号分隔
　　newextractTextPlugin(“/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==来解决
　　varwebsite={
　　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.0serverF:webLearnwebpackLearn
　　>webpack-dev-server
　　events.js:183
　　thrower;//Unhandled’error’event
　　^
　　Error:listenEADDRNOTAVAIL10.212.109.18:8087
　　atObject._errnoException(util.js:992:11)at_exceptionWithHostPort(util.js:1014:20)atServer.setupListenHandle[as_listen2](net.js:1338:19)atlistenInCluster(net.js:1396:12)atdoListen(net.js:1505:7)at_combinedTickCallback(internal/process/next_tick.js:141:11)atprocess._tickCallback(internal/process/next_tick.js:180:9)atFunction.Module.runMain(module.js:695:11)atstartup(bootstrap_node.js:191:16)atbootstrap_node.js:612:3npmERR!codeELIFECYCLE
　　npmERR!errno1npmERR!y@1.0.0server:`webpack-dev-server`
　　npmERR!Exitstatus1npmERR!
　　npmERR!Failedatthey@1.0.0serverscript.
　　npmERR!Thisisprobablynotaproblemwithnpm.Thereislikelyadditionalloggingoutputabove.
　　npmERR!Acompletelogofthisruncanbefoundin:
　　npmERR!C:Users勾丽娜AppDataRoamingnpm-cache_logs2018-07-11T07_46_12_914Z-debug.logPSF:webLearnwebpackLearn>
　　修改好正确的ip地址就可以运行成功了，哈哈

以上是“css文件怎么实现分离的插件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: CSS中如何让div在div中居中

这篇文章主要介绍“CSS中如何让div在div中居中”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS中如何让div在div中居中”文章能帮助大家解决问题。 div布局居中即最外层div居中，css采纳margin:…