Webpack 常见使用配置小结

随着前端开发复杂度不断提升，开发需求已远超基础界面展示。

• 例如，在开发过程中需采用模块化方式进行代码组织；
• 同时利用 ES6+、TypeScript 等高级特性提升脚本逻辑的开发效率与安全性，并通过 Sass、Less 等预处理器编写 CSS 样式；
• 此外，开发阶段还需实现文件变化的实时监听并自动刷新浏览器，以优化开发体验；
• 项目完成后，还需对代码进行压缩、合并及其他相关优化处理；
• 等等……。

即便使用三大主流框架或借助脚手架cli，事实上 Vue-CLI、create-react-app、Angular-CLI 均基于 Webpack 来支持模块化、Less、TypeScript 及打包优化等功能。

1. 简介

首先参考官方定义： webpack is a static module bundler for modern JavaScript applications. 即：Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具； 我们对这一定义进行拆解分析：

进入 Webpack 官网即可看到相关图示，这直观体现了其重要性与功能强大之处。

2. 上手准备

• Webpack 官方文档地址为 https://webpack.js.org/
• Webpack 中文官方文档地址为 https://webpack.docschina.org/
• DOCUMENTATION：文档详情，这也是我们最关注的部分。
• Webpack 的运行依赖 Node 环境，因此电脑上必须安装 Node，具体步骤如下：
• 安装 Node.js，同时会附带安装 npm；当前电脑上的 Node 版本为 v14.15.5，npm 版本为 6.14.11（也可使用 nvm 或 n 来管理 Node 版本）；
• Node 官方网站：https://nodejs.org

3. 安装

目前 Webpack 的安装分为两部分：webpack 和 webpack-cli。 执行 webpack 命令时，实际执行的是 node_modules 下 .bin 目录中的 webpack； Webpack 在执行时依赖 webpack-cli，若未安装则会报错； 而 webpack-cli 中的代码执行时，才是真正利用 Webpack 进行编译和打包的过程； 因此安装 Webpack 时需同时安装 webpack-cli（第三方脚手架实际上并未使用 webpack-cli，而是类似 vue-service-cli 的自定义工具）。

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

注意如果我们创建好项目，配置好 package.json 想要直接使用npm run build，我们需要在创建我们的 src 文件夹，并且文件夹下面必须有index.js,自从 v4.0.0 版本开始，webpack 不再需要配置文件”。没有配置文件，webpack 仅在存在 scr/index.js 文件时才有效。这个信息（使用粗体）在文档中明确标明。

创建局部 Webpack 第一步：创建 package.json 文件，用于管理项目的信息、库依赖等 第二步：安装局部的 webpack 第三步：使用局部的 webpack 第四步：在 package.json 中创建 scripts 脚本，执行脚本打包即可 创建局部的 webpack

npm init
npm install webpack webpack-cli -D
npx webpack

或者配置package.json文件

npm run build

我们可以在根目录下创建一个webpack.config.js文件，来作为 webpack 的配置文件：

继续执行 webpack 命令，依然可以正常打包

之后我们执行 npm run build 来打包即可

指定配置文件 我们将 webpack.config.js 修改成了 wk.config.js，这个时候我们可以通过 --config 来指定对应的配置文件；

3. 编写案列

当我们想使用 css 的时候

上面的错误信息告诉我们需要一个 loader 来加载这个 css 文件，但是 loader 是什么呢？

loader 可以用于对模块的源代码进行转换； 我们可以将 css 文件也看成是一个模块，我们是通过 import 来加载这个模块的； 在加载这个模块时，webpack 其实并不知道如何对其进行加载，我们必须制定对应的 loader 来完成这个功能；

css-loader 使用

npm install css-loader -D

使用方案 内联方式：内联方式使用较少，因为不方便管理； p在引入的样式前加上使用的 loader，并且使用!分割；

loader 配置方式 module.rules 的配置如下：

rules 属性对应的值是一个数组：[Rule] 数组中存放的是一个个的 Rule，Rule 是一个对象，对象中可以设置多个属性：

test 属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；

use 属性：对应的值时一个数组：[UseEntry]

UseEntry 是一个对象，可以通过对象的属性来设置一些其他属性

• loader：必须有一个 loader 属性，对应的值是一个字符串；
• options：可选的属性，值是一个字符串或者对象，值会被传入到 loader 中；
• query：目前已经使用 options 来替代；

传递字符串（如：use: [ ‘style-loader’ ]）是 loader 属性的简写方式（如：use: [ { loader: ‘style-loader’} ]）；

• loader 属性： Rule.use: [ { loader } ] 的简写

可以通过 css-loader 来加载 css 文件但是中并没有生效（页面没有效果）。我们还需要 style-loader 将.css 文件进行解析,完成插入 style 的操作

npm install style-loader -D

配置 style-loader

loader 的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将 styleloader 写到 css-loader 的前面；

如何处理 less 文件 使用 less 工具来完成它的编译转换：

npm install less -D

less-loader 处理

npm install less-loader -D

 module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }

postcss-loader 安装

什么是 PostCSS 呢？ PostCSS 是一个通过 JavaScript 来转换样式的工具； 这个工具可以帮助我们进行一些 CSS 的转换和适配，比如自动添加浏览器前缀、css 样式的重置； 但是实现这些功能，我们需要借助于 PostCSS 对应的插件；

如何使用 PostCSS 呢？主要就是两个步骤： 第一步：查找 PostCSS 在构建工具中的扩展，比如 webpack 中的 postcss-loader； 第二步：选择可以添加你需要的 PostCSS 相关的插件；

npm install postcss postcss-cli -D
npm install autoprefixer -D

真实开发中我们必然不会直接使用命令行工具来对 css 进行处理，而是可以借助于构建工具： 在 webpack 中使用 postcss 就是使用 postcss-loader 来处理的；

npm install postcss-loader -D

我们修改加载 css 的 loader：（配置文件已经过多，给出一部分了）

在根目录下创建 postcss.config.js

到此这篇关于 Webpack 常见使用配置小结的文章就介绍到这了,更多相关 Webpack 常见配置内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！