Webpack splits compressed CSS and imports it as a link

cjh_ code 2021-11-25 15:14:14

Catalog

Let's first look at the code file structure :

Entrance file (index1.js) Content :

 webpack.config.js Profile contents :

step : 

1、 install mini-css-extract-plugin

2、 stay webpack.config.js Import and configure in file

3、 Compressed split css file

4、 package  


Let's first look at the code file structure :

Entrance 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 Profile 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 filename
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: './public/ Interlacing discoloration .html'
})],
module: {
rules: [{
// matching .css Final document ,i It's case insensitive
test: [/\.css$/i],
// From right to left , Can't change the order style-loader yes CSS Insert into DOM in ,css- loader It's right @import and url() To deal with , It's like js analysis import /require() equally
use: ["style-loader", "css-loader"],
}, {
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
}, { // webpack5 These files are not recognized internally by default , So it can be output directly as a static resource
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'font/[name].[hash:6][ext]'
}
}],
},
};

We package and run the packaged html file :

Find out css The pattern is through js Generate style Added in the form of labels  

After we run the package, we will find less Into the css file , but css The document did pass js Join in style label , Next we will css Split it out , And link Tags introduced

step : 

1、 install mini-css-extract-plugin

npm i mini-css-extract-plugin -D //npm install
yarn add mini-css-extract-plugin -D //yarn install 

2、 stay webpack.config.js Import and configure in file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Introduce installed mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// Entry file address
entry: './src/index1.js',
output: {
path: path.resolve(__dirname, 'dist'),
// Export filename
filename: 'bundle.js',
},
plugins: [new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: './public/ Interlacing discoloration .html'
})],
module: {
rules: [{
// matching .css Final document ,i It's case insensitive
test: [/\.css$/i],
// From right to left , Can't change the order style-loader yes CSS Insert into DOM in ,css- loader It's right @import and url() To deal with , It's like js analysis import /require() equally
use: [MiniCssExtractPlugin.loader, "css-loader"
],
}, {
test: /\.less$/i,
use: [
// compiles Less to CSS
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
}, { // webpack5 These files are not recognized internally by default , So it can be output directly as a static resource
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'font/[name].[hash:6][ext]'
}
}],
},
};

Be careful :

  • HtmlWebpackPlugin Yes, it will css Document to link Form is introduced into the packaged html On the page .
  • use Configuration items are from right to left .
  • stay css and less In use (use In the configuration item )MiniCssExtractPlugin.loader Make sure you don't put css-loader Back and style-loader front , because css-loader and less-loader It's right @import and url() Processed , It's like js analysis import/require() equally ( After it, it is equivalent to splitting it without parsing, and an error will be reported ). and style-loader It's a CSS Insert into DOM Medium ( Putting it before it is equivalent to having CSS Insert into DOM An error will be reported if it is split again ).

3、 Compressed split css file

  1. download optimize-css-assets-webpack-plugin
  2. Introduce and configure webpack.config.js file
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Introduce installed mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// Used to compress split CSS
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// Entry file address
entry: './src/index1.js',
output: {
path: path.resolve(__dirname, 'dist'),
// Export filename
filename: 'bundle.js',
},
plugins: [new MiniCssExtractPlugin(),new OptimizeCSSAssetsPlugin({}),
new HtmlWebpackPlugin({
template: './public/ Interlacing discoloration .html'
})],
module: {
rules: [{
// matching .css Final document ,i It's case insensitive
test: [/\.css$/i],
// From right to left , Can't change the order style-loader yes CSS Insert into DOM in ,css- loader It's right @import and url() To deal with , It's like js analysis import /require() equally
use: [MiniCssExtractPlugin.loader, "css-loader"
],
}, {
test: /\.less$/i,
use: [
// compiles Less to CSS
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
}, { // webpack5 These files are not recognized internally by default , So it can be output directly as a static resource
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'font/[name].[hash:6][ext]'
}
}],
}
};

4、 package  

Found one more main.css file , Open a web page to view :

 main.css Document to link The way is introduced And compressed

Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25