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

This article is about how webpack splits compressed css and imports it as link. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Take a look at the code file structure first:

Entry file (index1.js) content: import $from 'jquery'import'. / css/index.css'import'. / less/index.less'$ (function () {$('# app li:nth-child (odd)'). Css ('color',' red') $('# app li:nth-child (even)'). Css ('color',' green')} import'. / assets/fonts/iconfont.css';const ul = document.querySelector ("ul") Const theI = document.createElement ("li"); theI.className='iconfont icon-qq';ul.appendChild (theI); webpack.config.js configuration file contents: const path = require ('path'); const HtmlWebpackPlugin = require (' html-webpack-plugin') Module.exports = {/ / entry file address entry:'. / src/index1.js', output: {path: path.resolve (_ _ dirname, 'dist'), / / export file name filename:' bundle.js',}, plugins: [new HtmlWebpackPlugin ({template:'. / public/ interlaced color .html'})] Module: {rules: [{/ / match the file at the end of .css I is case-indistinguishable test: [/\ .css $/ I], / / execute from right to left, cannot change the order style-loader is CSS inserted into DOM, css- loader is to handle @ import and url () Just like js parses import / require () use: ["style-loader", "css-loader"],}, {test: /\ .less $/ I, use: [/ / compiles Less to CSS 'style-loader',' css-loader' 'less-loader',],}, {/ / webpack5 does not recognize these files internally by default, so you can output them directly as static resources: test: /\. (eot | svg | ttf | woff | woff2) $/, type:' asset/resource' Generator: {filename: 'font/ [name]. [hash: 6] [ext]'}],},}

We package and then run the packaged html file:

It is found that the css style is added in the form of style tags generated by js

After we run the package, we will find that less has been converted to a css file, but the css file does add a style tag through js. Let's split the css and introduce it with the link tag.

Steps: 1. Install mini-css-extract-pluginnpm I mini-css-extract-plugin-D / / npm install yarn add mini-css-extract-plugin-D / / yarn installation 2, introduce and configure const path = require ('path') in the webpack.config.js file; const HtmlWebpackPlugin = require (' html-webpack-plugin'); / / introduce the installed mini-css-extract-pluginconst MiniCssExtractPlugin = require ("mini-css-extract-plugin") Module.exports = {/ / entry file address entry:'. / src/index1.js', output: {path: path.resolve (_ _ dirname, 'dist'), / / export file name filename:' bundle.js',}, plugins: [new MiniCssExtractPlugin (), new HtmlWebpackPlugin ({template:'. / public/ interlaced color .html'})] Module: {rules: [{/ / match the file at the end of .css I is case-indistinguishable test: [/\ .css $/ I], / / execute from right to left, cannot change the order style-loader is CSS inserted into DOM, css- loader is to handle @ import and url () Just like js parses import / require () use: [MiniCssExtractPlugin.loader, "css-loader"],}, {test: /\ .less $/ I, use: [/ / compiles Less to CSS MiniCssExtractPlugin.loader, 'css-loader' 'less-loader',],}, {/ / webpack5 does not recognize these files internally by default, so you can output them directly as static resources: test: /\. (eot | svg | ttf | woff | woff2) $/, type:' asset/resource' Generator: {filename: 'font/ [name]. [hash: 6] [ext]'}],},}

Note:

HtmlWebpackPlugin introduces the css file into the packaged html page as link.

The use configuration item is from right to left.

In the use of css and less, that is, (in the use configuration item), MiniCssExtractPlugin.loader must not be placed after css-loader and before style-loader, because css-loader and less-loader handle @ import and url (), just as js parses import/require (). (putting it after it is equivalent to splitting before it is parsed.) On the other hand, style-loader inserts CSS into DOM (putting it before it is equivalent to inserting CSS into DOM and then splitting will report an error).

3. Compress the split css file

Download optimize-css-assets-webpack-plugin

Introduce and configure webpack.config.js files

Const path = require ('path'); const HtmlWebpackPlugin = require (' html-webpack-plugin'); / / introduce the installed mini-css-extract-pluginconst MiniCssExtractPlugin = require ("mini-css-extract-plugin"); / / compress the split CSSconst OptimizeCSSAssetsPlugin = require ('optimize-css-assets-webpack-plugin') Module.exports = {/ / entry file address entry:'. / src/index1.js', output: {path: path.resolve (_ _ dirname, 'dist'), / / exit file name filename:' bundle.js',}, plugins: [new MiniCssExtractPlugin (), new OptimizeCSSAssetsPlugin ({}) New HtmlWebpackPlugin ({template:'. / public/ interlaced color change .html'}), module: {rules: [{/ / matches the file at the end of .css I is case-indistinguishable test: [/\ .css $/ I], / / execute from right to left, cannot change the order style-loader is CSS inserted into DOM, css- loader is to handle @ import and url () Just like js parses import / require () use: [MiniCssExtractPlugin.loader, "css-loader"],}, {test: /\ .less $/ I, use: [/ / compiles Less to CSS MiniCssExtractPlugin.loader, 'css-loader' 'less-loader',],}, {/ / webpack5 does not recognize these files internally by default, so you can output them directly as static resources: test: /\. (eot | svg | ttf | woff | woff2) $/, type:' asset/resource' Generator: {filename: 'font/ [name]. [hash: 6] [ext]'}],}} 4. Packing

If you find an extra main.css file, open the web page and view it:

The main.css file is introduced in link and compressed.

Thank you for reading! On "webpack how to split compressed css and import with link" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.