webpack入门介绍 --- loaders

Posted ZZZ --- jh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack入门介绍 --- loaders相关的知识，希望对你有一定的参考价值。

loaders

loaders

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

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

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

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

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

raw-loader

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

  1. 安装
npm install --save-dev raw-loader
  1. 在src下的index.js中引入
import girl from './data/girl.txt';

console.log(girl);
console.log('123456789')
  1. 在 webpack.config.js 中进行配置
module.exports = 
  ...,
  module: 
      rules: [
          
            test: /\\.(txt|md)$/,
            use: 'raw-loader'
            
        ]
  1. 然后package.json运行脚本start

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

markdown-loader

  1. 安装(markdown的和html)
npm install markdown-loader

npm install --save-dev html-loader
  1. 在src下的index.js中引入
import mdd from './data/haha.md';

console.log(mdd);
//在页面中输出markdown的内容
document.body.innerHTML = mdd;

console.log('123456789')
  1. 在 webpack.config.js 中进行配置
module.exports = 
    ...,
    module: 
        rules:[
            ...,
            
                test:/\\.md$/,
                // 执行多个loader时, 顺序是 从后往前
                use:['html-loader','markdown-loader'] 
            ,
        ]
  1. 然后package.json运行脚本start

file-loader

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

  1. 安装
npm install --save-dev file-loader
  1. 在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')
  1. 在 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',

                    
                
            
        ]
  1. 然后package.json运行脚本start

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

url-loader

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

  1. 安装
npm install --save-dev url-loader
  1. 在 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
          
        
	
]
  1. 然后package.json运行脚本start

css-loader

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

  1. 安装
npm install --save-dev css-loader
  1. 在src下新建一个cs.css文件
body
    background: rgb(47, 255, 203);
  1. 在index.js里面引入
import cs from './src/cs.css'

console.log(cs[0][1]); 
//bodybackground: greenyellow;

let sty = document.createElement('style');
sty.innerHTML = cs[0][1];
document.head.appendChild(sty);
  1. 在 webpack.config.js 中进行配置
rules: [
  ...,
	
		
            test: /\\.css$/,
            use: 'css-loader',
    		// or
    		use: 
              loader: "css-loader",
              options: 
                // 启用/禁用 url() 处理
                url: true,
                // 启用/禁用 @import 处理
                import: true,
                // 启用/禁用 Sourcemap
                sourceMap: false
              
            
            
        
	
]
  1. 然后package.json运行脚本start

style-loader

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

  1. 安装
npm install --save-dev style-loader
  1. 在index.js里面引入
//cs[0][1] 改为 cs
console.log(cs);
  1. 在 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
		
	]
  1. 然后package.json运行脚本start

sass-loader

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

  1. 安装
npm install --save-dev sass-loader node-sass
  1. 在 webpack.config.js 中进行配置
// webpack.config.js
module.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模块

以上是关于webpack入门介绍 --- loaders的主要内容，如果未能解决你的问题，请参考以下文章

webpack入门 API in LOADERS

Webpack 4.X 从入门到精通 - loader

webpack入门资源管理

怎样写一个webpack loader

webpack入门——webpack loader 和plugin

webpack入门篇--1.简单介绍