Webpack入门：二、初识Webpack（二）

小清明十八
82 阅读3分钟

一、webpack的配置文件

webpack默认的配置文件是项目根目录下的 webpack.config.js 文件，当我们执行 npx webpack 命令的时候，webpack会自动寻找到该文件并使用里面的配置信息进行打包，如果找不到该文件就使用默认参数打包。

下面我们新建一个 webpack.config.js 文件并写入简单的配置信息：

var path = require('path');

module.exports = {
    entry: './a.js',
    output: {
        path: path.resolve(__dirname, ''),
        filename: 'bundle.js'
    },
    mode: 'none'
};

文件中第一行引入了 path 模块，用于路径解析。在 output 配置项中使用的 __dirname 是 Node.JS的一个全局变量，表示当前文件的路径。

我们暂时在配置文件中写入了三个配置项：entry、output、mode，下面简单介绍一下这三个配置项：

  1. entry：webpack打包的入口文件，这里的入口文件是项目根目录的 a.js。
  2. output： webpack打包后的资源输出文件，它有两个属性，其中 path 表示输出的路径，filename 表示输出的文件名，文件中表示的是把打包后的文件输出到根目录下的 bundle.js 。
  3. mode：webpack的打包模式，默认是 production，表示给生产环境打包，在不同的打包模式下，webpack会做不同的优化处理。例如 production 模式下会对打包后的代码进行压缩。

二、webpack预处理器

Loader 即预处理器是 webpack 的一个重要组成部分，下面我们介绍一下预处理器的作用。

虽然webpack将引入的资源文件都当做模块来处理，但是若不进行额外处理，webpack只支持对 JS文件和 JSON 文件模块的处理。如果此时引入一个 CSS 文件或图片文件，那么webpack处理该模块时会通过控制台报错。

当webpack自身无法处理某种类型的文件时，就需要配置一个合适的预处理器，让webpack能够处理对应文件。

2.1 CSS 预处理器

2.1.1 常规引入 CSS 文件的问题

下面我们通过一个例子来认识 CSS 预处理器。

新建一个 npm 项目并初始化，并新建相关 html、css、js文件，项目目录结构如下：

image.png

webpack.config.js文件内容：

var path = require ('path');
 module.exports = {
    entry: './a.js',
    output: {
        path: path.resolve(__dirname, ''),
        filename: 'bundle.js'
    },
    mode: 'none'
 };

a.css文件内容：

.hello {
    margin: 30px;
    color: blue;
}

a.js文件内容：

import './a.css';

index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="bundle.js"></script>
</head>
<body>
    <div class="hello">样式生效</div>
</body>
</html>

然后在控制台输入 npx webpack 命令打包，结果会报错并提示我们安装 CSS 预处理器来处理CSS文件：

image.png

2.1.2 安装使用 CSS 预处理器

引入 CSS 文件需要安装两个预处理器：css-loader 和 style-loader。

其中，css-loader 的作用是解析 CSS 文件，它会将解析后的 CSS 文件以字符串的形式打包到 JS 文件中。但此时的 CSS 样式并不会生效，因为还需要 style-loader 将 JS 里的样式代码插入到 HTML 文件中，它的原理就是通过 JS 动态生成 style 标签并将其插入到 HTML 文件的 head 标签中。

下面我们在控制台输入命令 npm i css-loader style-loader 来安装这两个预处理器。安装完毕之后还要在 webpack.config.js 文件中配置这两个预处理器：

var path = require ('path');
 module.exports = {
    entry: './a.js',
    output: {
        path: path.resolve(__dirname, ''),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader','css-loader']
        }]
    },
    mode: 'none'
 };

新增的 module 配置项就是用来告诉 webpack 如何处理特定类型的文件，该项是一个对象，其 rules 属性是对各个类型文件的处理规则配置：

  1. test：值是一个正则表达式，例如上面文件中的 /\.css$/ 就是用来匹配文件名后缀是 .css 的文件，匹配后使用对应 use 里的预处理器。
  2. use：取值是一个数组，数组每一项是一个预处理器。要特别注意的是，预处理器的执行顺序是从后向前执行。所以文件中的配置，是先执行 css-loader，然后把执行结果交给 style-loader继续执行。

在对线上环境进行打包时就不需要 style-loader 了，而是通过插件把样式代码提取到单独的文件，以后会详细讲解。

avatar
文章
阅读
粉丝