webpack 二基础配置：配置loader

白了又了白
226 阅读5分钟

上篇讲了：

webpack 一基础配置： 学习使用，搭建脚手架

本篇文章讲解 常用 loader 及配置。 为什么要配置loader,因为webpack 只能识别js,json 文件，无法识别 .css 等其他文件，因此需要各种loader 处理对应格式文件。

webpack load 配置文档

一： .css 文件 相关loader

css 文件相关loader: style-loader和css-loader，可以将CSS文件打包到JavaScript中，并在浏览器中动态加载。

下载

npm i style-loader css-loader -D

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配CSS文件
        use: [
            'style-loader', // 将 JS 字符串生成为 style 节点
            'css-loader' // 将 CSS 转化成 CommonJS 模块
        ] 
      }
    ]
  }
};

二： .less 文件 相关loader

less 文件是loader: style-loader和css-loader， node-loader， sass-loader可以将less文件打包到JavaScript中，并在浏览器中动态加载。

下载

npm i style-loader css-loader sass-loader -D

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/, // 匹配leSS文件
        use: [
            'style-loader',  // 将 JS 字符串生成为 style 节点
            'css-loader',  // 将 CSS 转化成 CommonJS 模块
            'less-loader' // 将 less 编译成 CSS
        ] // 使用style-loader和css-loader
      }
    ]
  }
};

三： .scss .sass 文件 相关loader

文档

scss 文件是loader: style-loader和css-loader， node-loader， sass-loader可以将sass文件打包到JavaScript中，并在浏览器中动态加载。

下载

npm i style-loader css-loader node-loader sass-loader -D

要注意 node-loader 与 sass-loader 的版本对应关系

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.s[ac]ss$/i, // 匹配sass  scss 文件
        use: [
            'style-loader', // 将 JS 字符串生成为 style 节点
            'css-loader',  // 将 CSS 转化成 CommonJS 模块
            'sass-loader' // 将sass 编译成 CSS
        ] 
      }
    ]
  }
};

四： postcss-loader

postcss-loader 文档

postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：

  • 1 . 使用下一代css语法
  • 2 . 自动补全浏览器前缀
  • 3 . 自动把px代为转换成rem
  • 4 . css 代码压缩等等

postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。

安装 postcss-loader 与其需要使用的插件

npm i postcss  postcss-loader autoprefixer postcss-pxtorem  -D

4.1 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/, // 匹配leSS文件
        use: [
            'style-loader',  // 将 JS 字符串生成为 style 节点
            'css-loader',  // 将 CSS 转化成 CommonJS 模块
            'postcss-loader', // 配置抽离到 postcss.config.js 文件了。 必须先 postcss-loader，然后 css-loader，否则会报错
            'less-loader' // 将 less 编译成 CSS
        ] // 使用style-loader和css-loader
      }
    ]
  }
};

4.2根目录新建 postcss.config.js，注意：名字不能乱写，会自动读取 （webpack 下个大版本可能会废弃）

module.exports = {
    plugins: {
        "autoprefixer": {
            "overrideBrowserslist": [
                 "ie >= 8", // 兼容IE7以上浏览器
                 "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
                 "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
                 "opera >= 11.5", // 兼容欧朋版本号大于11.5浏览器
            ]
        },
        "postcss-pxtorem": {
            rootValue: 100, // 根元素字体大小
            propList: ['*'] // 可以从px更改到rem的属性
            // propList: ["height"]
        }
}

五： .js 文件 相关loader

使用bable-loader 把ES6转化成ES5。js es6 及以上会用到新特性，webpack 不能完全支持，因此需要load 转化语法。

下载

使用bable-loader 把ES6转化成ES5

在使用前 需要安装3个包

  • babel-loader 在webpack用来解析ES6
  • @babel/core babel核心模块
  • @babel/preset-env babel预设 一组babel插件的集合
  • 安装npm i babel-loader @babel/core @babel/preset-env -D
  • webpack.config.js配置rules
javascript
复制代码
module:{ //设置模块
    rules:[ //设置loader
      {
        test:/.js$/, //已作为js扩展名这样类型的文件
        exclude:/node_modules/, //排除node_modules文件夹
        use:{
          loader:'babel-loader', //转换成es5
          options:{
            presets:['@babel/preset-env'], //设置编译的规则
          }
        }
      }
    ]
  },
  • 但是这样直接打包会失败 因为目前还解析不了我们的async/await语法
  • 需要安装一个regeneratorRuntime环境

regeneratorRuntime插件

  • regeneratorRuntime是webpack打包生成的全局辅助函数
  • 由babel生成 用于兼容async/await 的语法

需要安装两个包

  • npm i @babel/runtime -D 包含了regeneratorRuntime运行时候需要的内容
  • npm i @babel/plugin-transform-runtime 这个插件 在需要regeneratorRuntime的地方自动导入包 就是在需要的时候会自动运行他
  • 配置文件 在babel的rules下新增一个plugin
javascript
复制代码
 {
        test:/.js$/, //已作为js扩展名这样类型的文件
        exclude:/node_modules/, //排除node_modules文件夹
        use:{
          loader:'babel-loader', //转换成es5
          options:{
            presets:['@babel/preset-env'], //设置编译的规则
            plugins:[ // 设置编译的插件
              ['@babel/plugin-transform-runtime'] //设置编译的规则
            ]
          }
        }
      }

并且需求新建配置文件 （ babel.config.* 或 .babelrc.*）

    1. babel.config.* ：新建文件,位于项目根目录
    • babel.config.js 文件或
    • babel.config.json
    1. .babelrc.* ：新建文件，位于项目根目录
    • .babelrc 文件或
    • .babelrc.js 文件或
    • .babelrc.json

  • （3）package.json 中 babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可。

babel.config.js 配置

module.exports = {
  ...
};

babel.config.json 配置



{
    "presets": [
        [
            "@babel/preset-env",  // 将es6的语法翻译成es5语法
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",// 做@babel/polyfill补充时，按需补充，用到什么才补充什么,
                "corejs": "3"
            }
        ],
        [
		    "@babel/preset-typescript",
			{
				"isTSX": true, 
				"allExtensions": true
			}
		]
    ],
    "plugins": [
		[
		    "@babel/plugin-transform-runtime",
			{
				"corejs": 3,
				"helpers": true,
				"regenerator": true,
				"useESModules": false
			}
		]
	]
}

.babelrc.js 配置

module.exports = {
  ...
};

.babelrc.json 配置



{
    "presets": [
        [
            "@babel/preset-env",  // 将es6的语法翻译成es5语法
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",// 做@babel/polyfill补充时，按需补充，用到什么才补充什么,
                "corejs": "3"
            }
        ],
        [
		    "@babel/preset-typescript",
			{
				"isTSX": true, 
				"allExtensions": true
			}
		]
    ],
    "plugins": [
		[
		    "@babel/plugin-transform-runtime",
			{
				"corejs": 3,
				"helpers": true,
				"regenerator": true,
				"useESModules": false
			}
		]
	]
}

六： .ts 文件 相关loader

配置 ts 及 对应loader

安装 npm i ts-loader typescript -D 配置

{
    test: /\.ts$/,
    use: "ts-loader",
    exclude:/node_modules/, //排除node_modules文件夹
},

新增 tsconfig.json 文件配置

{
    "compilerOptions": {
      "declaration": true,
      "declarationMap": true, // 开启map文件调试使用
      "sourceMap": true,
      "target": "es5", // 转换为Es5语法
    }
}

七： file-loader 处理文件 (webpack5 已内置模块asset， 因此直接配置 asset 即可)

说明文档

安装

npm i file-loader -D

配置

    rules: [
      // 打包字体图标规则
      {
        test: /.(eot|json|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              // 指定打包后文件名称
              name: "[name].[ext]",
              // 指定打包后文件存放目录
              outputPath: "font/",
            },
          },
        ],
      },
      //打包图片规则
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              // 指定打包后文件名称
              name: "[path][name].[ext]",
              // 指定打包后文件存放目录
              outputPath: "images",
              // 指定托管服务器地址(统一替换图片地址)
              publicPath: "assets",
            },
          },
        ],
      },
    ],

八： url-loader 处理文件 (webpack5 已内置模块asset， 因此直接配置 asset 即可)

说明文档

安装

npm i url-loader -D

配置

module.exports = {
  module: {
    rules: [
      //打包图片规则
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              /**
               * limit: 指定图片限制的大小
               * 如果被打包的图片超过了限制的大小, 就会将图片保存为一个文件
               * 如果被打包的图片没有超过限制的大小, 就会将图片转换成base64的字符串
               * 注意点:
               * 对于比较小的图片, 我们将图片转换成base64的字符串之后, 可以提升网页的性能(因为减少了请求的次数)
               * 对于比较大的图片, 哪怕我们将图片转换成了base64的字符串之后, 也不会提升网页的性能, 还有可能降低网页的性能
               * (因为图片如果比较大, 那么转换之后的字符串也会比较多, 那么网页的体积就会表达, 那么访问的速度就会变慢)
               * */
              limit: 1024 * 100,
              // 指定打包后文件名称
              name: "[path][name].[ext]",
              // 指定打包后文件存放目录
              outputPath: "images",
            },
          },
        ],
      },
    ],
  },
};

九： asset (webpack5 已内置模块 asset， 因此直接配置 asset 即可)

说明文档

配置

module.exports = {
  module: {
    rules: [
      {
        //处理图片的
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        //处理字体
        test: /.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        //处理视频和音频
        test: /.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
};

十： vue-loader （vue项目使用）

解析和转换.vue文件，提取出其中的逻辑代码script，样式代码style以及HTML模板template，再分别将它们交给对应的loader去处理。

vue-cli中默认配置了vue-loader，所以我们可以直接引入vue文件。

在 webpack 5 之前，通常使用：

  • raw-loader 将文件导入为字符串
  • url-loader 将文件作为 data URI 内联到 bundle 中
  • file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
  • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
  • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

安装 npm i vue-loader -D

配置

module.exports = {
  module: {
    rules: [
        {
            test: /\.vue$/,
            loader: "vue-loader"
        }
    ],
  },
};

常见的处理loader

  • babel-loader：将ES6/ES7/JSX等代码转换为ES5语法的loader。
  • css-loader：处理CSS文件的loader，支持模块化、压缩、自动添加浏览器前缀等功能。
  • style-loader：将CSS代码注入到HTML页面中的loader。
  • file-loader：处理文件的loader，可以将文件复制到输出目录，并返回文件路径。
  • url-loader：处理图片等文件的loader，可以将小文件转换为base64编码，减少HTTP请求。
  • sass-loader：处理Sass/SCSS文件的loader，将Sass/SCSS代码转换为CSS代码。
  • less-loader：处理Less文件的loader，将Less代码转换为CSS代码。
  • postcss-loader：处理CSS代码的loader，可以使用各种插件对CSS代码进行处理，如自动添加浏览器前缀、压缩等。
  • vue-loader：处理Vue单文件组件的loader，将Vue组件转换为JavaScript代码。
  • ts-loader：处理TypeScript文件的loader，将TypeScript代码转换为JavaScript代码。

webpack的安装与配置使用 最全最详细的小白教学

avatar
文章
阅读
粉丝