CSS packaging

// loader execution sequence, right from left (bottom to top) use:['style-loader', 'CSs-loader ']Copy the code
NPM install -d css-loader style-loaderCopy the code

webpack.config.js

/** * webpack CSS pack */ const {resolve} = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output:{ path: resolve(__dirname,'dist'), filename: 'bundle.js'}, module:{rules:[// specify multiple configuration rules {test: '/. CSS $/ I ', use:[// 2. Use :[// 2. Output to JS 'CSS-loader']}]}}Copy the code

/src/css/main.css

html{
  font-size: 66px;
}
Copy the code

/src/index.js

import './css/main.css';
Copy the code

/src/index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> <script SRC ="./dist/bundle.js"></script> </head> <body> hello </body> </html>Copy the code

The results of

Less packaging

use:['style-loader', 'css-loader', 'less-loader']
Copy the code
NPM install -d css-loader style-loader less less-loaderCopy the code

webpack.config.js

/** * webpack less */ const {resolve} = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output:{ path: resolve(__dirname,'dist'), filename: 'bundle.js'}, module:{rules:[// specify multiple configuration rules {test: '/. Less $/ I ', use:[// 2. <style> tag 'style-loader', // 2. // 1. Convert less to normal CSS 'less-loader']}]}}Copy the code

/src/css/main.less

@bg-color: #f04;

html, body{
  padding: 0;
  margin: 0;
}

body{
  background-color: @bg-color;
}

div{
  background-color: @bg-color;
}
Copy the code

/src/index.js

import './css/main.less';
Copy the code

/src/index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> <script SRC ="./dist/bundle.js"></script> </head> <body> hello </body> </html>Copy the code

The results of

CSS – Packaged as a separate file

Plug-ins need to be installed

npm install mini-css-extract-plugin -D
Copy the code

Introducing plug-ins (webpack.config.js)

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Copy the code

Replace style – loader

use:['MiniCssExtractPlugin.loader', 'CSS - loader'] / / 1. The style - loader: packaged CSS to < style > tag / / 2. MiniCssExtractPlugin. Loader: CSS are packed into a separate fileCopy the code

Configure the plug-in

new MiniCssExtractPlugin({})
Copy the code

webpack.config.js

/ / const {resolve} = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); Module. exports = {// export mode: 'development', // import file entry: './ SRC /index.js', // export configuration output: {path: Resolve (__dirname, 'dist'), filename: 'bundle.js'}, // module: {rules: [{test: /.css$/ I, use: / / / 'style - loader, / / 2. Packaged CSS to MiniCssExtractPlugin in separate files. The loader, / / CSS - loader according to CommonJS standard, / / 1. The style file, Output to the JS 'CSS - loader,]}, {test: /. Less $/ I, use: / / / 'style - loader, / / 3. Packaged CSS to MiniCssExtractPlugin in separate files. The loader, / / 2. CSS - loader according to CommonJS standard, the style file, Output to the JS 'CSS - loader, / / 1. Converting less common CSS' less - loader]}}], / / plug-in configuration plugins: [new MiniCssExtractPlugin ({/ / if you don't write, The default value is output. Filename: 'CSS /[name].css'})]}Copy the code

Compress CSS

The installation

npm i optimize-css-assets-webpack-plugin -D
Copy the code

The introduction of

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
Copy the code

configuration

new OptimizeCssAssetsPlugin({})
Copy the code

The results of

/** * webpack */ const {resolve} = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); Module. exports = {// export mode: 'development', // import file entry: './ SRC /index.js', // export configuration output: {path: Resolve (__dirname, 'dist'), filename: 'bundle.js'}, // module: {rules: [{test: /.css$/ I, use: [// 3. Put the style in JS, Mount to the < style > tag / / 'style - loader, / / 3. Packaged CSS to MiniCssExtractPlugin in separate files. The loader, / / CSS - loader according to CommonJS standard, }, {test: /. Less $/ I, use: [// 4. Put the style in JS, Mount to the < style > tag / / 'style - loader, / / 4. Packaged CSS to MiniCssExtractPlugin in separate files. The loader, / / 3. CSS - loader according to CommonJS standard, the style file, // 1. Convert less to normal CSS 'less-loader']}]}, // Plugins :[new MiniCssExtractPlugin({filename: 'CSS /[name].css'}), new OptimizeCssAssetsPlugin()}Copy the code