头图

webpack基础配置与css相关loader

Lyx
English
本系列文章是我在学习webpack时的总结与收获,希望我的一些学习内容可以帮助到一些正在学习 webpack 的朋友。本片文章为系列文章的第二篇,包含 webpack 基础配置与 css 相关 loader

webpack的使用(01篇内容补充)

webpack安装方式:

# 全局安装
npm install webpack webpack-cli -g
# 本地项目安装
npm install webpack webpack-cli

如果我们直接在命令行中执行 webpack ,此时,它默认使用的全局安装的webpack以及webpack-cli,如果没有全局安装这两个东西,则就会报错如下:

$ webpack --config wk.config.js
bash: webpack: command not found

如果在全局也安装了相同的依赖,那么我们是可以直接执行该命令的

若想要使用本地项目中的 webpack、webpack-cli,有两种方式:

  1. npx webpack --config wk.config.js :该命令可以直接使用 node_modules/.bin/ 下的可执行文件,使用的就是本地安装的依赖
  2. npm run build :该命令会执行 package.json 文件中 scripts 下的 build 命令,此时会优先使用本地依赖,如果本地依赖不存在,则会使用全局依赖

这一点也解释了很常见的一个面试题:为什么要运行 npm run xxx,而不直接运行其对应的指令

webpack 配置

webpack 配置文件

webpack 的默认配置文件为:webpack.config.js ,放在项目的根目录下。但其实,webpack(我使用的webpack5的版本)提供了三种默认配置文件的写法,均位于项目根目录下自上而下优先级递减,如下所示:

  • webpack.config.js
  • .webpack/webpack.config.js
  • .webpack/webpackfile.js

如果不想使用默认配置文件,可以自定义配置文件,在package.json中,添加--config 自定义配置文件路径

"scripts": {
    "build": "webpack --config path"
}

在 webpack-cli/lib/webpack-cli.js 中可以查看到相应代码:

if (options.config && options.config.length > 0) {
    // 读取自定义配置文件
    // options.config 中包含自定义配置文件的路径
    const loadedConfigs = await Promise.all(
    options.config.map((configPath) => {
      return loadConfigByPath(path.resolve(configPath), options.argv)
    }
    ),
  );
} else {
    // 默认配置文件路径
    // Order defines the priority, in decreasing order
    const defaultConfigFiles = [
        "webpack.config",
        ".webpack/webpack.config",
        ".webpack/webpackfile"
    ]
}

自定义配置文件

webpack 基础配置

这部分内容包含entry、output以及module的简单配置,更为复杂的配置例如多入口、hashname等将在后续文章中逐步讲解

entry:表示打包文件的入口,用相对路径表示

module.exports = {
    // src 下的 index.js 文件为打包的入口文件
    entry: './src/index.js'
}

outptut:打包文件输出配置。输出文件路径 path 是一个绝对路径

module.exports = {
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './build')
    }
}

module: 主要用来配置 loader 选项,其写法结构如下:

module.exports = {
    module: {
        rules: [
        
        ]
    }
}

rules 当中存放的是 Rule 对象,Rule 对象可以分为三个部分:

  • Rule Conditions: 用来匹配对应的文件。例如,使用test、include、exclude等结合正则表达式匹配 css、less、jpg文件
  • Rule results: 使用的loader,常用的属性有loader、options、use。use 属性对应一个数组,数组中存放一个个对象,这些对象就是具体使用的loader。其中,loader属性为字符串,options 属性为字符串或对象,其会被传入到 loader 中
  • Nested rules: 在属性规则下指定嵌套规则

具体写法有三种:

第一种写法:最完整的写法

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,  // 使用正则表达式进行匹配
                use: [
                    {loader: 'css-loader', options: {}}
                ]
            }
        ]
    }
}

第二种写法:当只有一个loader时,可以采取这种简写方式

module.exports = {
    module: {
        rules: [
            {
                 test: /\.css$/,  // 使用正则表达式进行匹配
                 loader: 'css-loader'
            }
        ]
    }
}

第三种写法:省略 loader 属性,直接写 loader 的名称,可以在不配置 options 属性的情况下使用这种简写方式

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,  // 使用正则表达式进行匹配
                use: [
                    'css-loader'
                ]
            }
        ]
    }
}

css 相关 loader 配置

css-loader

css-loader 只用来加载css文件,并不会将解析之后的css插入到页面,因此,打包之后的HTML中样式并不会发生变化

Untitled.png

此时,可以看到并没有以style标签或行内样式的方式插入CSS,所以,CSS不会生效

style-loader

若想要 css-loader 处理后的样式插入到页面中,还需要另外一个loader, style-loader。style-loader 负责在页面中创建一个style标签,并将处理好的样式插入其中,这样我们才能在页面上看到样式发生变化。

Untitled (1).png

需要注意的是 loader 的执行顺序问题。在 webpack 中,当需要多个 loader 时,按照自下向上的顺序执行

css-loader 用来加载 css 文件,style-loader 将处理好的 css 插入到页面中,因此,css-loader 在 style-loader 之前执行

module.exports = {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
}

如何处理 less 等 css 预处理文件?

在开发中,经常使用less、sass、stylus预处理器来编写 css 样式,那么 如何去支持这些预处理器呢?因此,需要将预处理器样式文件 转为 css 文件,再处理 css 文件

less

npm install less less-loader --save-dev

sass

npm install sass-loader sass webpack --save-dev

注意,真正将 less 文件转为 css 文件的是我们安装的 less 工具,这个工具与 webpack 没有关系,而less-loader 会自动调用 less 包,对 less 文件进行处理

执行 npx less ./src/css/component.less > component.css 可以将less 文件转为 css 文件

Untitled (2).png

less 文件处理配置

module.exports = {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }
    ]
}
阅读 495
1 声望
369 粉丝
0 条评论
1 声望
369 粉丝
宣传栏