Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "css file how to achieve separate plug-ins", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn about "css files how to achieve separate plug-ins" this article.

1. Install the plug-in:

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. Introduce plug-ins into webpack-config.js

ConstextractTextPlugin=require ("extract-text-webpack-plugin")

3. Configure plugins: new this object here, separated from the above configuration plug-in by a comma

NewextractTextPlugin ("/ css/index,.css")

4. The / css/index.css here is the separated path location. After this configuration is completed, the packaging code: we also need to modify our original style-loader and css-loader.

[X] the modified code is as follows:

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. Use webpack for packaging

PublicPath: in the output option of the webpack.config.js file, the main role is to deal with static file paths

You need to declare a website object above the webpack.config.js before processing

Note: the IP and port here are native ip or the IP and port / / = = publicPath configured by your devServer must be written correctly: check the ip address of the computer with ipconfig, followed by the port you set by the colon = =

Note: although the css file is separated, the css path is incorrect

Solve the problem with = = publishPath==

Varwebsite= {

PublicPath: "http://192.168.1.108:1717"}

6. Refer to the publicPath property of this object in the output option

/ / the configuration item output of the export file: {/ / the output path, using Node syntax

Path:path.resolve (_ _ dirname,'dist'), / / the name of the exported file

Filename:' [name] .js'

PublicPath:website.publicPath

}

7. Use webpack for packaging, and the original relative path will become an absolute path (the absolute path will be faster)

* if the following error occurs, the ip is not written correctly

> 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: 191rig 16) atbootstraproomnode.jsVera 612purl 3npmERRenec codeELIFECYCLE

NpmERRenderrno1npmERResteryroom1.0.0server: `webpack-dev- server`

NpmERR!Exitstatus1npmERR!

NpmERRpermission Failedattheysubscription 1.0.0serverscript.

NpmERR!Thisisprobablynotaproblemwithnpm.Thereislikelyadditionalloggingoutputabove.

NpmERR!Acompletelogofthisruncanbefoundin:

NpmERRenec:\ Users\ Gorina\ AppData\ Roaming\ npm-cache\ _ logs\ 2018-07-11T07_46_12_914Z-debug.logPSF:\ webLearn\ webpackLearn >

Modify the correct ip address and you can run successfully. Haha

The above is all the contents of the article "how to implement separate plug-ins in css files". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.