Webpack常见问题解读

1.前言

Webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的打包工具，是现代 Web 开发必须掌握的技能之一，因此每位紧跟时代的前端工程师都应该掌握 Webpack

在 Web 应用变得庞大复杂时，采用直接操作 DOM 的方式去开发将会使代码变得复杂和难以维护，许多新思想被引入到网页开发中以减少开发难度、提升开发效率

构建就是做这件事情，把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
• 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。

 

Webpack的优点是：

• 专注于处理模块化的项目，能做到开箱即用一步到位；
• 通过 Plugin 扩展，完整好用又不失灵活；
• 使用场景不仅限于 Web 开发；
• 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
• 良好的开发体验。

Webpack的缺点是只能用于采用模块化开发的项目。

 

经过多年的发展， Webpack 已经成为构建工具中的首选，这是有原因的：

• 大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化+新语言+新框架”，Webpack 可以为这些新项目提供一站式的解决方案；
• Webpack 有良好的生态链和维护团队，能提供良好的开发体验和保证质量；
• Webpack 被全世界的大量 Web 开发者使用和验证，能找到各个层面所需的教程和经验分享。

2.安装webpack

见教程https://blog.csdn.net/weixin_39089928/article/details/104302202

3.Loader

Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换

module: {
    rules: [
        {
            test: /\.(scss|css)$/, // 提取css
            use: ['style-loader', 'css-loader?minimize'],
        },
        {
            test: /\.vue$/,
            loader: "vue-loader",
        },
        {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/,
        },
        {
            test: /\.(png|jpg|gif|svg)$/, // 图片加载器，较小的图片转成 base64
            loader: "url-loader",
            query: {
                limit: 10000,
                name:
        process.env.NODE_ENV === "production"
            ? "/imgs/[name].[ext]?[hash:7]"
            : "./imgs/[name].[ext]?[hash:7]",
            },
        },
        {
            // 解析字体资源
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: {
                loader: "file-loader",
                options: {
                    outputPath: "font",
                },
            },
        },
    ],
},

use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；

每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩

4.Plugin

Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。

Webpack 是通过 plugins 属性来配置需要使用的插件列表的。

例如 ExtractTextPlugin 插件的作用是提取出 JavaScript 代码里的 CSS 到一个单独的文件。 对此你可以通过插件的 filename 属性，告诉插件输出的 CSS 文件名称是通过 [name]_[contenthash:8].css 字符串模版生成的，里面的 [name] 代表文件名称， [contenthash:8] 代表根据文件内容算出的8位 hash 值

plugins: [
    new MiniCssExtractPlugin({
        filename: "css/[name].css",
    }),
    new VueLoaderPlugin(),
   
    new TransformModulesPlugin(),
    new webpack.ProvidePlugin(
        process.env.DEBUG === "on" ?
        {
            api: "api",
        } :
        {},
    ),
    new webpack.DefinePlugin({
        isBrowserDebug: process.env.DEBUG === "on",
    }),

],

5.Webpack 有以下几个核心概念。

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

6.wepack中loader和plugin的区别

 loader 是一个转换器，把 A 文件编译转换成 B 文件，相当于一个翻译员。针对的是项目最终输出的代码文件或资源文件。

例如：通过less-loader、babel-loader等，它们都是将我们项目源码中的一些浏览器不支持代码转换成浏览器能够支持的代码。

 

plugin 是一个扩展器，Plugin 是用来扩展 Webpack 功能的。plugins针对的是工程层面，或是整个项目层面。

loader针对代码或资源，plugins针对工程。