這篇文章主要為大家展示了“css文件怎么實(shí)現(xiàn)分離的插件”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css文件怎么實(shí)現(xiàn)分離的插件”這篇文章吧。

成都創(chuàng)新互聯(lián)于2013年成立，先為精河等服務(wù)建站，精河等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為精河企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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一下這個(gè)對象，與上面那個(gè)配置插件用逗號分隔

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進(jìn)行打包

publicPath：是在webpack.config.js文件的output選項(xiàng)中，主要作用就是處理靜態(tài)文件路徑的

在處理前需要在webpack.config.js上方聲明一個(gè)website對象

注意：這里的IP和端口是本機(jī)的ip或者是你devServer配置的IP和端口//==publicPath里面的內(nèi)內(nèi)容一定要寫正確：用ipconfig查看電腦的ip地址，然后冒號后面跟自己設(shè)置的端口==

注意：雖然把css文件分離出來了，但是css路徑不對

用==publishPath==來解決

varwebsite={

publicPath:"http://192.168.1.108:1717"}

6、在output選項(xiàng)中引用這個(gè)對象的publicPath屬性

//出口文件的配置項(xiàng)output:{//輸出的路徑，用了Node語法

path:path.resolve(__dirname,'dist'),//輸出的文件名稱

filename:'[name].js',

publicPath:website.publicPath

},

7、使用webpack進(jìn)行打包，這時(shí)原來的相對路徑就會(huì)變?yōu)榻^對路徑（絕對路徑速度會(huì)更快）

*若出現(xiàn)下列錯(cuò)誤，說明ip沒寫對

>y@1.0.0serverF:\webLearn\webpackLearn

>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\勾麗娜\AppData\Roaming\npm-cache\_logs\2018-07-11T07_46_12_914Z-debug.logPSF:\webLearn\webpackLearn>

修改好正確的ip地址就可以運(yùn)行成功了，哈哈

以上是“css文件怎么實(shí)現(xiàn)分離的插件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！