码迷,mamicode.com
首页 > Web开发 > 详细

14webpack之loader

时间:2019-10-24 17:05:00      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:rod   ack   包图   svg   合并   代码   开启   文件中   tput   

webpack之loader作用

loader是一种打包的方案,webpack默认只识别js结尾的文件,当遇到其他格式的文件后,webpack并不知道如何去处理。此时,我们可以定义一种规则,告诉webpack当他遇到某种格式的文件后,去求助于相应的loader。

      const path = require(‘path‘);

      module.exports = {
        // 模式:可选为:development, 默认为:production
        mode: ‘development‘,
        // 源代码文件夹:src
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /\.jpg$/,
              use: {
                  loader: ‘file-loader‘
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
  

打包静态资源

file-loader
      const path = require(‘path‘);

      module.exports = {
        mode: ‘production‘,
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /\.(jpg|png|gif)$/,
              use: {
                  loader: ‘file-loader‘,
                  options: { // 配置
                    name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                    outputPath: ‘images/‘ // 输出到images文件夹下
                  }
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
  

url-loader

url-loader和file-loader都可以打包图片,区别是url-loader会将图片以base64打包到js文件中,当图片过大时,打包的js文件也会过大。所以最佳实践是:将小图片打包为base64,大于某个值的文件打包为图片。如果在配置中不加limit,所有图片都会打包为base64。 下面案例的意思是:超过10kb的文件打包为图片,小于10kb的打包为base64

      npm install url-loader --save-dev
      const path = require(‘path‘);
      
      module.exports = {
        mode: ‘production‘,
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /\.(jpg|png|gif)$/,
              use: {
                  loader: ‘url-loader‘,
                  options: { // 配置
                    name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                    outputPath: ‘images/‘, // 输出到images文件夹下
                    limit: 10240 // 超过10kb打包为图片
                  }
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
  

字体:file-loader

      const path = require(‘path‘);

      module.exports = {
        mode: ‘production‘,
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /\.(eot|ttf|svg)$/,
              use: {
                  loader: ‘file-loader‘          
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
      
  

样式:style-loader css-loader

css-loader会理清多个css文件之间的引用关系,最后合并为一个。

style-loader会将css样式挂载到head的style标签中

        npm install style-loader css-loader -D
        sass-loader
        将scss文件编译为css
        
        npm install sass-loader node-sass --save-dev
        const path = require(‘path‘);
        
        module.exports = {
          mode: ‘production‘,
          entry: {
            main: ‘./src/index.js‘ // 入口文件
          },
          module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: ‘url-loader‘,
                    options: { // 配置
                      name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                      outputPath: ‘images/‘, // 输出到images文件夹下
                      limit: 10240 // 超过10kb打包为图片
                    }
                }
            },{
                test: /\.scss$/,
                use: [
                  ‘style-loader‘,
                  ‘css-loader‘,
                  ‘sass-loader‘
                ]
            }]
          },
          output: {
            filename: ‘bundle.js‘,  // 文件名
            path: path.resolve(__dirname, ‘dist‘)  // 文件夹
          }
        }
        详细配置
        
        const path = require(‘path‘);
        
        module.exports = {
          mode: ‘production‘,
          entry: {
            main: ‘./src/index.js‘ // 入口文件
          },
          module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: ‘url-loader‘,
                    options: { // 配置
                      name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                      outputPath: ‘images/‘, // 输出到images文件夹下
                      limit: 10240 // 超过10kb打包为图片
                    }
                }
            },{
                test: /\.scss$/,
                use: [
                  ‘style-loader‘,
                  {
                    loader: ‘css-loader‘,
                    options: { // 配置
                      importLoaders: 1, // scss文件中引用的scss文件也经过下面的一个loader打包
                      modules: true // 开启模块化css,引入的css仅在当前模块有效,而不是全局
                    }
                  },
                  ‘sass-loader‘
                ]
            }]
          },
          output: {
            filename: ‘bundle.js‘,  // 文件名
            path: path.resolve(__dirname, ‘dist‘)  // 文件夹
          }
        }
    

postcss-loader

        为样式加上厂商浏览器前缀

        npm i -D postcss-loader
        const path = require(‘path‘);
        
        module.exports = {
          mode: ‘production‘,
          entry: {
            main: ‘./src/index.js‘ // 入口文件
          },
          module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: ‘url-loader‘,
                    options: { // 配置
                      name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                      outputPath: ‘images/‘, // 输出到images文件夹下
                      limit: 10240 // 超过10kb打包为图片
                    }
                }
            },{
                test: /\.scss$/,
                use: [
                  ‘style-loader‘,
                  ‘css-loader‘,
                  ‘sass-loader‘,
                  ‘postcss-loader‘
                ]
            }]
          },
          output: {
            filename: ‘bundle.js‘,  // 文件名
            path: path.resolve(__dirname, ‘dist‘)  // 文件夹
          }
        }
    

autoprefixer插件

        npm install autoprefixer -D
        postcss.config.js
        
        module.exports = {
            plugins: [
              require(‘autoprefixer‘)
            ]
        }
    

14webpack之loader

标签:rod   ack   包图   svg   合并   代码   开启   文件中   tput   

原文地址:https://www.cnblogs.com/lucy-xyy/p/11733283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!