CSS files for the use of decoupled plug-ins (extract-text-webpack-plugin)

This article brings the content is about the CSS file implementation of the separate plug-in (extract-text-webpack-plugin) usage, there is a certain reference value, the need for friends can refer to, I hope to help you.

CSS Separation: Extract-text-webpack-plugin

1. Install the plugin:

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. Introduction of plugins in Webpack-config.js
Const Extracttextplugin=require ("Extract-text-webpack-plugin");

3, configuration plugins: Here new this object, with the above configuration plug-in separated by commas
New Extracttextplugin ("/css/index,.css")

4, the/css/index.css here is the location of the path after separation. After this configuration is complete, the packaging code: Also to modify the original Style-loader and Css-loader

• [x] Modify the code 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 primary role is to handle the static file path

• A website object needs to be declared above webpack.config.js before processing

• Note: Here the IP and port is the IP of the machine or your devserver configured IP and port//==publicpath inside content must be written correctly: use ipconfig to view the IP address of the computer, and then the colon followed by the Port = =
  

• Note: Although the CSS file is separated, but the CSS path is not

• Use ==publishpath== to solve

  var website={    publicpath: "http://192.168.1.108:1717"}

  6. Reference the Publicpath property of this object in the Output option

  Export file configuration item output:{    //output path, with node syntax    path:path.resolve (__dirname, ' dist '),    //output file name    filename: ' [ Name].js ',    PublicPath:website.publicPath},

  7, packaging with Webpack, then the original relative path will become absolute path (absolute path speed will be faster)
  
  

* If the following error occurs, the IP is not written to

> 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: One) at _exceptionwithhostport (util.js:1014:20) at server.setuplistenhandle [as _listen2] (net.js:1338:19) at Lis Tenincluster (Net.js:1396:12) at Dolisten (Net.js:1505:7) at _combinedtickcallback (internal/process/next_tick.js:14    1: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 the This run can be found IN:NPM err! C:\Users\ Sarina \appdata\roaMing\npm-cache\_logs\2018-07-11t07_46_12_914z-debug.logps f:\weblearn\webpacklearn> 

Modify the correct IP address to run successfully, haha