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