Extract-text-webpack-plugin Detailed


Recently been doing a project, the project itself is a single page application created with Vue-CLI. Since the project extension needs to create multiple pages, it is necessary to Different HTMLs are packaged in CSS files, respectively. So started to study the extract-text-webpack-plugin plugin.


The package pattern has two methods, one is to automatically put the CSS code to the generated style using STYLE-LoADER. In the tag, insert it into the Head tab. The other is to use the extract-text-webpack-plugin plug-in to package style files separately, and package the output file is specified by the Output property in the configuration file. Then we write a LINK tab in the entrance HTML page to introduce this packaged style file.
3 plug-in


1 plug-in mounting:


# for WebPack 3 NPM Install – Save-dev extract-text-webpack-plugin # for weight-dev extract-text-webpack-plugin@2.1.2# for webpack 1 npm install –save-dev extract-text -WebPack-Plugin@1.0.1

2 Inserts Use
 Introduced in WebPack.config.js   
Const extractTextPlugin = Require (“EXTRACT-TEXT-WebPack-Plugin “); Module.Exports = {Module: {Rules: [{Test: /\.css $/, use: extractTextPlugin.extract ({Fallback:” style-loader “, // After compiling What to use to extract the CSS file USE: “css-loader” // Refers to what kind of loader to compile files, here the source file is .CSS, select Css-loader}}]}, plugins: [New extractTextPlugin “Styles.css”),]}


Multi-instance

There is also an extract function on an example. You have more than 1 instance of extractTextPlugin, you should use the extract on the instance, you should use the extract.
   
Const extractTextPlugin = Require (‘extract-text-webpack-plugin ” ); // Create multiple instancesconst extractCSS = new ExtractTextPlugin ( ‘stylesheets / [name] -one.css’); const extractLESS = new ExtractTextPlugin ( ‘stylesheets / [name] -two.css’); module.exports = {module : {Rules: [{Test: /\.css $/, USE:Extractcss.extract ([‘css-loader’, ‘poscss-loader’])}, {test: /\.less ([‘css-loader’, ‘less-loader’] {TESTLESS.EXTRACT )},]}, plugins: [extractcss, extractless]};

extraction of LESS or SASS

It is the same, using Sass-Loader to replace Less-Loader based on demand.

const extractTextPlugin = Require (‘extract-text-webpack-plugin “); module.exports = {module: {rules: [{Test: / \ . SCSS $ /, USE: ExtractTextPlugin.extract ({Fallback: ‘style-loader’, USE: [‘CSS-Loader’, ‘Sass-loader’]}}]}, plugins: [New ExtractTextPlugin (‘style. CSS ‘) // if you want to pass in options, you can do so: // new extractTextPlugin ({// filename:’ style.css’ //})]}
   
URL () ResoLVING

If you run WebPack discover Urls Resolve is wrong. You can use Options to extend the loader function. URL: False makes your path resolve will not change any changes.

const extractTextPlugin = Require (‘extract-text-webpack-plugin “); module.exports = {module: {rules: [{Test: / \ . SCSS $ /, use: extractTextPlugin.extract ({Fallback: ‘style-loader’, use: [{loader: ‘css-loader’, options: {// if you are haVing trouble with urls not resolving address set setting. // see https://github.com/webpack-contrib/css-loader#url URL: False, Minimize: true, sourcemap: true}}, {loadinger: ‘Sass-loader’, options: {sourcemap: true} }]}

Change the file name
   
FileName parameter can be funcTION. Returns a true file name, CSS / JS / A.CSS, by incorporating the format of CSS / [Name] .css, returns a real file name. You can replace CSS / JS as CSS so you can get a new path CSS / A.CSS.

Entry: {‘JS / A’: “./a”} ,plugins: [new extractTextPlugin ({filename: (getPath) => {Return GetPath (‘CSS / [Name] .css’). Replace (‘CSS / JS’, ‘CSS’);}, allchunks: true}]

It is the whole content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment