(精华)2020年7月12日 webpack 配置第三方 loader

file-loader：处理理静态资源模块，url-loader :处理图片 base64

yarn add file-loader-D 或者 npm install file-loader-D
yarn add url-loader-D 或者 npm install url-loader-D

module: {
     
    rules: [
      {
     
        test: /\.(png|jpe?g|gif)$/,
        //use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组        
        use: {
     
          loader: "url-loader",
          // options额外的配置，比如资源名称          
          options: {
     
            // placeholder 占位符  [name]⽼老老资源模块的名称            
            // [ext]⽼资源模块的后缀            
            // https://webpack.js.org/loaders/file-loader#placeholders            
            name: "[name]_[hash].[ext]",
            //打包后的存放位置            
            outputPath: "images/",
            //小于2048B，才转换成base64 的文件打成Base64的格式，写入JS           
            limit: 2048,
            publicPath: '/images' //最终生成的CSS代码中，图片URL前缀   	        
          }
        }
      }
    ]
  }

CSS 预处理

yarn add style-loader css-loader --dev

// 模块解析 
  module: {
     
    rules: [
      {
     
        test: /\.css$/,
        exclude: /node_modules/,
        use: [{
     
          loader: "style-loader"
        }, {
     
          loader: "css-loader"
        }] //方式一
        //use: ["style-loader", loader: "css-loader" ]  //方式二
      }
    ]
  }

配置 less 环境

yarn add less less-loader --dev

// 模块解析 
  module: {
     
    rules: [
      {
     
        test: /\.less$/,
        exclude: /node_modules/,
        use: [{
     
            loader: "style-loader"
          },
          {
     
            loader: "css-loader"
          },
          {
     
            loader: 'postcss-loader'
          },
          {
     
            loader: "less-loader"
          }
        ] //方式一
      }
    ]
  }

配置 scss 环境

yarn add node-sass sass-loader --dev

// 模块解析 
module: {
     
 rules: [{
     
     test: /\.scss$/,
     use: [{
     
         loader: "style-loader"
       }, {
     
         loader: "css-loader"
       }, {
     
         loader: "sass-loader"
       }] //方式一
       //use: ['style-loader','css-loader','sass-loader'] //方式二 }
     }
 }

PostCSS 相关配置

yarn add postcss-loader postcss --dev

 module: {
     
    rules: [
      {
     
        test: /\.css$/,
        exclude: /node_modules/,
        use: [{
     
          loader: "style-loader"
        }, {
     
          loader: "css-loader"
        }, {
     
          loader: 'postcss-loader'
        }]
      }
    ]
  }

postcss.config.js

module.exports = {
     
    plugins: {
     
        //require("autoprefixer")
        'autoprefixer':{
     },//自动补全
        //需要在packahe.json添加
        // "browserslist": [
        //     "last 10 Chrome versions",
        //     "last 5 Firefox versions",
        //     "Safari >= 6",
        //     "ie> 8"
        //   ],
        //单位转换插件
        'postcss-preset-env': {
     },
        'postcss-pxtorem': {
     
            rootValue: 10,
            minPixelValue: 2,
            propWhiteList: []
        }
    }
}