Webpack前世今生 (4)

生成好package.json后我们可以使用npm run build来打包我们的项目。当我们执行npm run build时它首先会去我们局部的webpack中去寻找命令,如果找不到再去全局寻找

7.loader

loader是webpack中一个非常核心的概念。webpack用来做什么呢?在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css、图片,也包括一些高级的将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说,对于这些转化是不支持的。那怎么办呢?给webpack扩展对应的loader就可以啦。

loader使用过程:

步骤一:通过npm安装需要使用的loader

步骤二:在webpack.config.js中的modules关键字下进行配置

大部分loader我们都可以在webpack的官网中找到,并且学习对应的用法。

7.1CSS loader

项目开发过程中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。在src目录中,创建一个css文件,其中创建一个normal.css文件。我们也可以重新组织文件的目录结构,将零散的js文件放在一个js文件夹中。normal.css中的代码非常简单,就是将body设置为red但是,这个时候normal.css中的样式会生效吗?当然不会,因为我们压根就没有引用它。webpack也不可能找到它,因为我们只有一个入口,webpack会从入口开始查找其他依赖的文件。

normal.css

body { background-color: red; }

在main.js中引入

//引入CSS文件 require('./css/normal.css')

image-20200722063401552

重新打包,出现如下错误

image-20200722064111412

这个错误告诉我们:加载normal.css文件必须有对应的loader。

这时,我们打开webpack的官网https://www.webpackjs.com/loaders/css-loader/,找到对应的css-loader的配置。loader的配置按照官网的要求来就可以,安装好对应的loader后,我们需要在webpack.config.js中加入相应的配置

const path = require('path'); module.exports = { //入口:可以是字符串、数组、对象 entry: './src/main.js', //出口:通常是一个对象,里面至少包含两个属性,path和filename output: { path: path.resolve(__dirname, 'dist'), //注意 path通常是一个决定路径 filename: 'bundle.js' }, module: { //引入 css配置 rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] } };

注意:使用css-loader前必须引入style-loader,不然在页面看不到效果

7.2less loader

如果我们希望在项目中使用less、scss、stylus来写样式,webpack是否可以帮助我们处理呢?我们这里以less为例,其他也是一样的。我们还是先创建一个less文件,依然放在css文件夹中

image-20200722064712866

image-20200722064744056

继续在官方中查找,我们会找到less-loader相关的使用说明。首先,还是需要安装对应的loader。注意:我们这里还安装了less,因为webpack会使用less对less文件进行编译。其次,修改对应的配置文件,添加一个rules选项,用于处理.less文件

npm install --save-dev less-loader less

image-20200722065141726

7.3图片文件处理

首先,我们在项目中加入两张图片:一张较小的图片test01.jpg(小于8kb),一张较大的图片test02.jpeg(大于8kb),待会儿我们会针对这两张图片进行不同的处理

我们先考虑在css样式中引用图片的情况,所以我更改了normal.css中的样式:

image-20200722065057716

如果我们现在直接打包,会出现如下问题

image-20200722065119797

图片处理,我们使用url-loader来处理,依然先安装url-loader

npm install --save-dev url-loader

修改webpack-config.js

image-20200722065306543

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyypjp.html