关于webpack:webpack基础配置与css相关loader

2次阅读

共计 3196 个字符，预计需要花费 8 分钟才能阅读完成。

本系列文章是我在学习 webpack 时的总结与播种，心愿我的一些学习内容能够帮忙到一些正在学习 webpack 的敌人。本片文章为系列文章的第二篇，蕴含 webpack 根底配置与 css 相干 loader

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，有两种形式：

npx webpack --config wk.config.js：该命令能够间接应用 node_modules/.bin/ 下的可执行文件，应用的就是本地装置的依赖
npm run build：该命令会执行 package.json 文件中 scripts 下的 build 命令，此时会优先应用本地依赖，如果本地依赖不存在，则会应用全局依赖

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

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"
    ]
}

自定义配置文件

这部分内容蕴含 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 文件，并不会将解析之后的 css 插入到页面，因而，打包之后的 HTML 中款式并不会发生变化

此时，能够看到并没有以 style 标签或行内款式的形式插入 CSS，所以，CSS 不会失效

style-loader

若想要 css-loader 解决后的款式插入到页面中，还须要另外一个 loader, style-loader。style-loader 负责在页面中创立一个 style 标签，并将解决好的款式插入其中，这样咱们能力在页面上看到款式发生变化。

须要留神的是 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 文件

less 文件解决配置

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

正文完