webpack4.15.1 学习笔记(十) — 常见 loader 使用

目录

• style -loader <= css-loader <= less-loader
• postcss-loader
• file-loader
• url-loader
• html-withimg-loader
• babel-loader
• expose-loader

style -loader <= css-loader <= less-loader

• style-loader 将css样式插入到html中

• css-loader 解析import、require 路径处理

• less-loader 将less解析为css

{
    test: /\.less$/,
    use: [{
       loader: 'style-loader', // 配置成一个对象
       options: {
           insertAt: 'top' // 设置解析后的样式 插入html的位置，top为最上面，目的是为了使得用户在html中编写的样式优先级最高
       }
    }, 'css-loader','less-loader']
},

postcss-loader

配合autoprefixer插件，给css 添加浏览器前缀，需要在解析css代码之前使用。（写在css-loader之后，因为loader执行顺序是从右往左）

需要一个配置文件：postcss.config.js

postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')] // 给css添加浏览器前缀
}

{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},

file-loader

默认会在内部生成一张图片，到build目录下，再返回生成的图片名称，在css中可以直接使用，因为使用了css-loader，会进行require操作，在js文件中使用图片，则需要import 或者require操作。

body {
    background: url('./logo.png') /* css-loader 会转换为 url(require('./logo.png')) */
}

// index.js
import logo from './logo'
let image = new Image()
image.src = logo
document.body.appendChild(image)

{
   test: /\.(png|svg|jpg|gif)$/,
   use: ['file-loader']
},

url-loader

使用url-loader可以对解析的图片的规格进行一些限制。当图片小于 xx K时，用base64来转化，可以减少http请求(但是base64生成的文件，会比源文件大1/3，是base64的特点)。否则是file-loader

{
    test: /\.(png|svg|jpg|gif)$/,
    use: {
       loader: 'url-loader',
       options: {
           limit:200*1024,
           outputPath:'img/',
           publicPath: 'http://www.xxx.com' // 资源放至cdn服务器后，可以配置请求域名等
       }
   }
},

html-withimg-loader

解析html中 引入的图片，

<div>
    < img src="./logo.png" />    <-- 会使用打包生成的文件名-->
</div>

{
    test: /\.html$/,
    use: ['html-withimg-loader']
},

babel-loader

babel默认只转换新的 JavaScript 语法，如箭头函数，不能转换新的 API，如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。

npm install babel-loader @babel/core @babel/preset-env -D
npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
npm install @babel/plugin-transform-runtime  -D
npm install @babel/runtime  @babel/polyfill

{
    test: /\.js$/,
    use: {
       loader: 'babel-loader',
       options: {
          presets: ['@babel/preset-env'], // 预设，转换js语法
          "plugins": [
             ["@babel/plugin-proposal-decorators", { "legacy": true }],   // 解析类的装饰器
             ["@babel/plugin-proposal-class-properties", { "loose": true }], // 解析类的属性
             "@babel/plugin-transform-runtime", // 解析promise，Generator等新的API
              "@babel/polyfill" //  解析实例上的方法
            ]
        }
    },
    include: path.resolve(__dirname, 'src'),
    exclude: /node_modules/
}

expose-loader

npm install jquery
npm install expose-loader -D

1. 在模块中，使用内联loader，完成向全局暴露一个变量

import $ from 'expose-loader?$!jquery'
console.log(window.$)  // 打开浏览器，打印成功

1. 通过webpack配置模块规则，向每个引入jquery的模块中注入全局变量

import $ from 'jquery'

// webpack.config.js
module: {
     rules: [{
         test: require.resolve('jquery'),
         use: 'expose-loader?$'
     }
 }

1. 其他暴露变量的方法：ProvidePlugin(内置)：提供插件 — 可以用来向每个模块注入变量，但不能通过通过window.$来访问，并未暴露给全局，仅在每个模块中使用

// webpack.config.js
const webpack = require('webpack');
module: {
    // ...
    plugins: [
        new webpack.ProvidePlugin({
            $:'jquery'
        }),
    ],
}

1. cdn引入，但不打包

<-- index.html -->

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

// index.js
// 此时在文件中，可以拿到 $ 对象
// 但是如果再次通过 import 引入jquery，就会被重复打包，使打包后的文件，体积变大
import $ from 'jquery'

// webpack.config.js
module: {
  // ...
  externals: {  // 分别对比配置该属性前后，打包后文件的体积，明显变小
     jQuery: '$'
  },
}