关于webpack:Webpack-简介

0次阅读

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

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

Webpack 凭借弱小的性能与良好的应用体验，曾经成为目前最风行，社区最沉闷的构建工具，是古代 Web 开发必须把握的技能之一。

在当下的前端环境里，各种框架和工具层出不穷，比方 React、Vue、Angular 等，极大的进步了咱们的开发效率，然而，他们都有一个共同点：源代码无奈间接运行，必须通过转换之后才可执行。

而转换代码的这个过程咱们能够称之为构建，被用来进行构建的工具咱们叫做 构建工具，而 Webpack 便是其中的佼佼者。

构建工具的惯例作用：

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

Webpack 是应用 NodeJs 开发进去的一个构建工具，实质上，它是一个古代 JavaScript 应用程序的 动态模块打包器（module bundler）。

当 Webpack 解决应用程序时，它会递归地构建一个 依赖关系图（dependency graph），其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。

在 Webpack 里所有文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最初输入由多个模块组合成的文件。

Webpack 专一于构建模块化我的项目。借用 Webpack 官网首页的图片来看一下它到底是什么：

所有文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的益处是能清晰地形容出各个模块之间的依赖关系，以不便 Webpack 对模块进行组合和打包。通过 Webpack 的解决，最终会输入浏览器能应用的动态资源。

以下是 Webpack 的根本配置，次要蕴含了 webpack 的四个 外围概念：

入口(entry)
输入(output)
loader
插件(plugins)

const path = require('path');

module.exports = {
    // 模式配置
    mode: "production", // "production" | "development" | "none"

    // 入口文件
    entry: "./app/entry", // string | object | array

    output: {
        // webpack 如何输入后果的相干选项
        path: path.resolve(__dirname,
            "dist"), // string
    },

    module: {
        // 对于模块配置
        rules: [
            // 模块规定（配置 loader、解析器等选项）{test: /\.jsx?$/,}
        ]
    },

    // 插件
    plugins: [// ...],
}

长处：

专一于解决模块化的我的项目，能做到开箱即用一步到位；
通过 Plugin 扩大，残缺好用又不失灵便；
应用场景不仅限于 Web 开发；
社区宏大沉闷，常常引入紧跟时代倒退的新个性，能为大多数场景找到已有的开源扩大；
良好的开发体验。

毛病：

只能采纳模块化开发

Webpack 能成为泛滥构建工具中的佼佼者，次要有以下起因：

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

（本文完）