Webpack4 配置 Loader

最新推荐文章于 2024-04-14 09:50:06 发布

LiuJun2Son

最新推荐文章于 2024-04-14 09:50:06 发布

阅读量1.3k

点赞数

分类专栏：构建工具文章标签：构建工具 webpack

本文链接：https://blog.csdn.net/u012987546/article/details/96280942

版权

构建工具专栏收录该内容

24 篇文章 2 订阅

订阅专栏

1.Module

module 配置如何处理模块, 它的值是一个对象，常用的值有 noParse 和 rules 。其中 noParse 是用来指定哪些资源不需要解析，提高编译性能；rules 是用来定义多个规则，这些规则用来匹配对应的模块，然后给对应的模块应用指定的loader,rules 接收的是一个数组，数组存放的是 rule 对象;

rule 对象常用的属性：test, use, include, exclude, loader, loaders, options, enforce …

简单的使用案例：

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
  },
  // 1.Webpack 的modules模块  
  module： {
    // 2.指定哪些资源不需要解析，提高编译性能
   	noParse: () => {
      return /jquery|chartjs/.test(content);  
    },
    // 3.定义多个规则来匹配对应的模块，然后给对应的模块应用指定的loader    
    rules: [
    	{
            // 4.匹配对应的文件
            test: '/\.js$/',
            // 5.use是应用指定的loader，别名是 loaders
            use: [
                
            ]
            //....
            //....
        }
    ]
    
  }  
};

2.配置Loader

rules 配置模块的读取和解析规则，通常用来配置 Loader。其类型是一个数组，数组里每一项 Rule 都描述了如何去处理部分文件。配置一项 rules 时大致通过以下方式：

条件匹配：通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件。
应用规则：对选中后的文件通过 use 配置项来应用 Loader，可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader，同时还可以分别给 Loader 传入参数。
重置顺序：一组 Loader 的执行顺序默认是从右到左执行，通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后。

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
  },
  // 1.Webpack 的modules模块  
  module： {
    // 2.定义多个规则来匹配对应的模块，然后给对应的模块应用指定的loader    
    rules: [
    	{
            // 3.正则匹配对应的文件
            test: '/\.css$/',
            // 4.应用指定的loader,下面使用了两个loader，先执行css-loader
            use: [
               'style-loader', 
    		   'css-loader'
            ]
            //....
            //....
        }
    ]
    
  }  
};

use: [‘style-loader’, ‘css-loader’] 的全写是 use: [ { loader: ‘style-loader’ }, { loader: ‘css-loader’ } ]

3.配置css Loader

新建一个项目

|-- package.json
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.css
|           `-- main.js
`-- webpack.config.js

package.json

{
  "name": "testcssloader",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  }
}

1.scripts 属性里面编写了3个脚本：其中 dev 对应的脚本是构建测试版；其中 build对应的脚本是构建发布版
2.使用的开发依赖有：style-loader css-loader webpack webpack-cli

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    // 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )
    filename: 'bundle.js',
    // 2. 指定输出文件存放的目录（默认是dist目录）
    path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配 .css 结尾的文件,注意test的值不是一个字符串，而是一个正则
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
};

use接收一个数组，数组中可以存放字符串和对象，并且use的别名是 loaders。

例如：

use: ['style-loader', 'css-loader']  
	等于 
use: [{ loader:'style-loader',options:{} }, 'css-loader']
	等于 
use: [ { loader:'style-loader',options:{} }, {loader:'css-loader', options: {} } ]

use: ['style-loader', 'css-loader']  
 	等于
loaders: ['style-loader', 'css-loader']
 	等于
loaders: ['style-loader', { loader:'css-loader', options: {} }]

main.css

body {
  background-color: pink;
}

main.js

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 CSS 模块
require('./main.css');

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和用到的loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-dev
npm install style-loader@0.23.1  --save-dev
npm install css-loader@3.0.0  --save-dev

在项目的根目录，执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

打包之后的 bundle.js 文件的部分内容：

 (function(modules) { // webpackBootstrap
 	// The module cache
 	var installedModules = {};

 	// The require function
 	function __webpack_require__(moduleId) {
 		// Execute the module function
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 		// Flag the module as loaded
 		module.l = true;
 		// Return the exports of the module
 		return module.exports;
 	}
 	// Load entry module and return exports
 	return __webpack_require__(__webpack_require__.s = "./src/main.js");
 })
({
  // 加载main.css样式 模块
  "./node_modules/css-loader/dist/cjs.js!./src/main.css":(function(module, exports, __webpack_require__) {

      eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.i, \"body {\\r\\n  background-color: pink;\\r\\n}\", \"\"]);\n\n\n//# sourceURL=webpack:///./src/main.css?./node_modules/css-loader/dist/cjs.js");

   }),  

  "./node_modules/css-loader/dist/runtime/api.js":(function(module, exports, __webpack_require__) {
    ......
  }),

  "./node_modules/style-loader/lib/addStyles.js":(function(module, exports, __webpack_require__) {
    .....
  }),
      
  // style-loader 添加样式
  "./node_modules/style-loader/lib/urls.js":(function(module, exports) {
    ........
 }),

  // 2.    
  "./src/common.js":(function(module, exports) {
	.....
  }),
      
  // 3.css-loader 加载样式
  "./src/main.css":(function(module, exports, __webpack_require__) {
	.....
 }),

  // 1.加载的入口文件    
  "./src/main.js":(function(module, exports, __webpack_require__) {

    eval("// 1.通过 CommonJS 规范导入 showHelloWorld 函数\r\nconst showHelloWorld = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r\n// 2.执行 showHelloWorld 函数\r\nshowHelloWorld('Webpack的安装和使用');\r\n// 3.通过 CommonJS 规范导入 CSS 模块\r\n__webpack_require__(/*! ./main.css */ \"./src/main.css\");\n\n//# sourceURL=webpack:///./src/main.js?");

  })

});

index.html

<html><head>
  <meta charset="UTF-8">
<!-- Webpack 中 style-loade r插入的 style 样式-->    
<style type="text/css">body {
  background-color: pink;
}</style></head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>

</body></html>

总结：

Loader 可以看作是文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。

如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。在配置 Loader 时需要注意的是：

use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；

源码下载

4.配置css Loader参数

css Loader Options 可以接收的参数：

Name	Type	Default	Description
url	`{Boolean\\|Function}`	`true`	Enable/Disable`url()` handling
import	`{Boolean\\|Function}`	`true`	Enable/Disable @import handling
modules	`{Boolean\\|String\\|Object}`	`false`	Enable/Disable CSS Modules and setup their options
sourceMap	`{Boolean}`	`false`	Enable/Disable Sourcemaps
importLoaders	`{Number}`	`0`	Number of loaders applied before CSS loader
localsConvention	`{String}`	`asIs`	Setup style of exported classnames
onlyLocals	`{Boolean}`

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        // 注意：loaders 是 use 的别名,下面的loaders也可以改成use
        loaders: [
          {
            loader: 'style-loader',
            options: {
              
            }
          },
          {
            loader: 'css-loader',
            // 给每一个 loader 传递参数  
            options: {
              url: true,
              import: true
            }
          }
        ]
      }
    ]
  }
};

源码下载地址

LiuJun2Son

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack4 配置 Loader

1.Modulemodule 配置如何处理模块, 它的值是一个对象，常用的值有 noParse 和 rules 。其中 noParse 是用来指定哪些资源不需要解析，提高编译性能；rules 是用来定义多个规则，这些规则用来匹配对应的模块，然后给对应的模块应用指定的loader,rules 接收的是一个数组，数组存放的是 rule 对象;rule 对象常用的属性：test, use, i...
复制链接

扫一扫