(精华)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前缀   	        
          }
        }
      }
    ]
  }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
 

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" ]  //方式二
      }
    ]
  }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

配置 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"
          }
        ] //方式一
      }
    ]
  }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

配置 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'] //方式二 }
     }
 }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

PostCSS 相关配置

yarn add postcss-loader postcss --dev

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

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: []
        }
    }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107294393