本文共 5387 字，大约阅读时间需要 17 分钟。

loaders

​ 官网: https://webpack.js.org/loaders/

// webpack.config.jsmodule.exports = {
   	....,    module: {
           rules:[            {
                   test:/\.txt$/,                loader: 'raw-load'            }        ]    }}

​ 案例: (但是webpack会默认报错,因为webpack处理不了txt和md这样的非js的模块,但是可以通过专门来处理纯文本内容,不同的loader有不同的作用)

// src/data/girl.txt 我是txt的内容

// src/index.jsimport girl from './data/girl.txt'console.log(girl);

raw-loader

​ 加载文件原始内容(utf-8)

1. 安装

npm install --save-dev raw-loader

2. 在src下的index.js中引入

import girl from './data/girl.txt';console.log(girl);console.log('123456789')

3. 在 webpack.config.js 中进行配置

module.exports = {
     ...,  module: {
         rules: [          {
               test: /\.(txt|md)$/,            use: 'raw-loader'            }        ]	}}

4. 然后package.json运行脚本start

注意:在黑窗口里面,写./node_modules/.bin/webpack会报错./不是内部或者外部的指令,要写成反斜杠.\node_modules\.bin\webpack

markdown-loader

1. 安装(markdown的和html)

npm install markdown-loadernpm install --save-dev html-loader

2. 在src下的index.js中引入

import mdd from './data/haha.md';console.log(mdd);//在页面中输出markdown的内容document.body.innerHTML = mdd;console.log('123456789')

3. 在 webpack.config.js 中进行配置

module.exports = {
       ...,    module: {
           rules:[            ...,            {
                   test:/\.md$/,                // 执行多个loader时, 顺序是 从后往前                use:['html-loader','markdown-loader']             },        ]    }}

4. 然后package.json运行脚本start

file-loader

​ 将识别出的资源模块文件发送到指定的输出文件夹,并返回这个资源在输出目录的地址(字符串)

1. 安装

npm install --save-dev file-loader

2. 在src下的index.js中引入

import ss from './data/-26953ed6fb615e2a.jpg';console.log(ss);let img = new Image();img.src = ss;document.body.appendChild(img)console.log('123456789')

3. 在 webpack.config.js 中进行配置

module.exports = {
       ...,    module: {
           rules:[            ...,            {
                   test: /\.(png|jpe?g|gif)$/i,                use:{
                       loader : 'file-loader',                    options: {
                           // 设置打包后的文件位置                        // 相对的时全局的outputPath路径                        outputPath:'/image',                        // [path] : 路径                        // [name] : 文件名                        // [ext] : 后缀                        // name: '[path][name].[ext]',                        // 设置打包后的文件返回的url                        publicPath:'./dist/image',                    }                }            }        ]    }}

4. 然后package.json运行脚本start

​ 批注 占位符:https://webpack.js.org/loaders/file-loader#placeholders

url-loader

​ 可以处理file-loader所有的事情,但是遇到图片格式的模块,可以选择行的把图片转成base64格式的字符串,并打包到js中, 对小体积的图片比较合适,大图片不合适.

1. 安装

npm install --save-dev url-loader

2. 在 webpack.config.js 中进行配置

rules: [  ...,	{
   		test: /\.(png|jpe?g|gif)$/,        use: {
             loader: "url-loader",          options: {
               // placeholder 占位符 [name] 源资源模块的名称            // [ext] 源资源模块的后缀            name: "[name]_[hash].[ext]",            //打包后的存放位置            outputPath: "./images"            // 打包后文件的 url            publicPath: './images',            // 小于 100 字节转成 base64 格式            limit: 100          }        }	}]

3. 然后package.json运行脚本start

css-loader

​ 分析css模块之间的关系,并合成一个css.

1. 安装

npm install --save-dev css-loader

2. 在src下新建一个cs.css文件

body{
       background: rgb(47, 255, 203);}

3. 在index.js里面引入

import cs from './src/cs.css'console.log(cs[0][1]); //body{background: greenyellow;}let sty = document.createElement('style');sty.innerHTML = cs[0][1];document.head.appendChild(sty);

4. 在 webpack.config.js 中进行配置

rules: [  ...,	{
   		{
               test: /\.css$/,            use: 'css-loader',    		// or    		use: {
                 loader: "css-loader",              options: {
                   // 启用/禁用 url() 处理                url: true,                // 启用/禁用 @import 处理                import: true,                // 启用/禁用 Sourcemap                sourceMap: false              }            }                    }	}]

5. 然后package.json运行脚本start

style-loader

​ 把css-loader生成的内容, 用style标签挂载到页面的head中.

1. 安装

npm install --save-dev style-loader

2. 在index.js里面引入

//cs[0][1] 改为 csconsole.log(cs);

3. 在 webpack.config.js 中进行配置

rules: [  ...,	{
   		test: /\.css$/,        use: ["style-loader", "css-loader"]    }]

同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理

{
       test: /\.css$/,	use: [ 'style-loader',{
   		loader:'css-loader',		options: {
   			// 启用/禁用 url() 处理			url: false,			// 启用/禁用 @import 处理			// import: true,			// 启用/禁用 Sourcemap			// sourceMap: false		}	}]}

4. 然后package.json运行脚本start

sass-loader

​ 把sass语法转换成css, 依赖node-sass模块

1. 安装

npm install --save-dev sass-loader node-sass

2. 在 webpack.config.js 中进行配置

// webpack.config.jsmodule.exports = {
     ...  module: {
       rules: [{
         test: /\.scss$/,      use: [{
             loader: "style-loader"           // 将 JS 字符串生成为 style 节点      }, {
             loader: "css-loader"           // 将 CSS 转化成 CommonJS 模块      }, {
             loader: "sass-loader"           // 将 Sass 编译成 CSS      }]    }]  }};

注意:

1. webpack默认情况下只能处理js模板;需要提供的其他功能来把任意文件数据作为模块进行处理
2. 同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理

总结:

loaders

• raw-loader 加载文件原始内容
• markdown-loader
• file-loader 将识别出的资源模块文件发送到指定的输出文件夹,并返回这个资源在输出目录的地址(字符串)
• url-loader 可以处理file-loader所有的事情, 对小体积的图片比较合适,转成base64格式的字符串
• css-loader 分析css模块之间的关系,并合成一个css
• style-loader 把css-loader生成的内容,用style标签挂载到页面的head中.
• sass-loader 把sass语法转换成css,依赖node-sass模块

转载地址：https://blog.csdn.net/ZZZ___jh/article/details/117741870 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！