file-loader: processing static resource module, urL-loader: processing image base64
Yarn add file-loader -d or NPM install file-loader -d yarn add url-loader -d or NPM install url-loader -d
module: {
rules: [{test: /\.(png|jpe? g|gif)$/.One loader can use objects, strings of characters, and two loaders need to use arrays
use: {
loader: "url-loader".// options Additional configuration, such as resource names
options: {
// placeholder [name] Specifies the name of the old resource module
// [ext] old resource module suffix
// https://webpack.js.org/loaders/file-loader#placeholders
name: "[name]_[hash].[ext]".// The packing location
outputPath: "images/".< 2048B, convert base64 file into base64 format, write JS
limit: 2048.publicPath: '/images' // The image URL prefix in the final generated CSS code}}}]}Copy the code
CSS pretreatment
yarn add style-loader css-loader –dev
// Module parsing
module: {
rules: [{test: /\.css$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}] / / way
//use: ["style-loader", loader: "CSS-loader"] // Mode 2}}]Copy the code
Configuring the LESS Environment
yarn add less less-loader –dev
// Module parsing
module: {
rules: [{test: /\.less$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: 'postcss-loader'
},
{
loader: "less-loader"}]/ / way}}]Copy the code
Configure the SCSS environment
yarn add node-sass sass-loader –dev
// Module parsing
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}] / / way
/ / use: [' style - loader ', 'CSS - loader', 'sass - loader'] / / 2}}}Copy the code
PostCSS Related configurations
yarn add postcss-loader postcss –dev
module: {
rules: [{test: /\.css$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: 'postcss-loader'}}}]]Copy the code
postcss.config.js
module.exports = {
plugins: {
//require("autoprefixer")
'autoprefixer': {},// Auto-complete
// Need to be added in packahe.json
// "browserslist": [
// "last 10 Chrome versions",
// "last 5 Firefox versions",
// "Safari >= 6",
// "ie> 8"
/ /,
// Unit conversion plug-in
'postcss-preset-env': {},
'postcss-pxtorem': {
rootValue: 10.minPixelValue: 2.propWhiteList: []}}}Copy the code