webpack的扩展loader

1、什么是loader

  • loader是webpack中一个非常核心的概念。

  • 在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

  • 对于webpack本身的能力来说，对于这些转化是不支持的。

  • 那怎么办呢？给webpack扩展对应的loader就可以啦。
    loader使用过程：
    步骤一：通过npm安装需要使用的loader
    步骤二：在webpack.config.js中的modules关键字下进行配置
    大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。
    链接地址：(webpack中文文档)

image

  • 点击LOADER可以找到你需要的loader

2、具体操作

css文件处理

项目结构

image

准备工作

index

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./src/js/b.js"></script>
  </body>
</html>

normal.css

body {
    /* background-color: aquamarine; */
    background: url(../img/yichang.jpg);
}

loader下载
1、css-loader和style-loader

  • 安装
npm install --save-dev css-loader
npm install style-loader --save-dev
  • 引入
    b.js
require('../css/normal.css');
  • 修改webpack.config.js
    webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/js/b.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
	module: {
    rules: [
      {
        test: /\.css$/,
	//css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到文档中
	//这个时候，我们还需要一个style-loader帮助我们处理将css具体样式嵌入到文档中
	//webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

打包
image

ES6语法转换为ES5语法（bable-loader）

官方文档--->ES6语法转换为ES5语法

图片文件处理 (url-loader file-loader)

官方文档--->图片文件处理

posted @ 2021-06-08 20:15  .爬行的蜗牛  阅读(57)  评论(0)  编辑  收藏  举报
Document