[JavaScript知识库]webpack---前端工程化

你需要知道的webpack

背景

随着前端工程化的发展，代码的开发已经不只是写html、css、js这三套文件就可以了。由于前端应用的复杂度越来越高，传统的这种写法已经不符合当前的场景。因为这样的写法让开发和维护变得越来越复杂，迭代的成本越来越高。加上模块化和组件化的思想越来越流行，导致vue、react等框架深得人心。但是不管用什么黑科技，浏览器是只认那三个文件的。于是打包工具就顺其自然的出现了，当然打包工具有很多，这里笔者选用的是webpack，因为很多框架都和它进行结合开发。所以这是你需要知道的打包工具。

什么是前端工程化

随着技术的发展，前端的开发已经不是三剑客（html、css、js）时代了。其实工程化是一个比较宽泛的一个描述。webpack的使用可以算是前端工程化的一个体现。总的来说工程化就是使用一系列的工具使得开发的效率和项目的质量得到提升。比如现在的前端开发都是组件化和模块化，webpack的打包工具就让开发变得更高效。开发者只需要关注业务开发，把工程化基础架构配置好之后，就会自动出来代码的兼容、打包、压缩等。

webpack是什么

引用官网的话来说，本质上，webpack?是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)?。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)?，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个?bundle。

所以webpack就是一个模块打包器，把开发用的模块进行一个打包整合，最后输出浏览器能识别的静态文件

webpack基本配置

• entry

入口起点指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为?bundles?的文件中

• output

output?属性告诉 webpack 在哪里输出它所创建的?bundles，以及如何命名这些文件，默认值为?./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个?output?字段，来配置这些处理过程。

• loader

loader?让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

• plugins

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

• Mode

通过选择?development?或?production?之中的一个，来设置?mode?参数，你可以启用相应模式下的 webpack 内置的优化

这里只是简单说下定义，具体详细可以去看下官网，写的比较详细，就不多说了。

webpack的构建流程

其实webpack就像是一条生产流水线，要经过流水线上的一系列工作之后才能将源代码转换成相应的输出内容。这里简单说一下构建流程。

• 实例化Compiler编译对象
• 初始化入口，解析入口文件，构建依赖树
• 确定编译环境
• 初始化内部解析
• 决定以什么样的方式开始编译
• 开始对文件进行编译
• 对每个模块创建Compilation，Compilation会对依赖树的模块进行编译，可以在编译期间被加载、优化以及重新创建
• 编译结束
• 输出文件
• 编译完成

什么是loader

在webpack中，起到编译作用的便是loader，其实可以简单把它理解成翻译官。把webpack不理解的内容通过loader转译成webpack能够理解的内容。比如平时写的es6代码通过babel-loader来编译，scss、less等通过各自的loader进行转译。其实loader简单来说就是一个函数，在函数中对传入的需要转译的内容进行操作，可以看到最简单的loader如下：

module.exports = function (code) {
    return code
}
复制代码

其实这个loader就什么也没有做，只是原样返回内容。

如何使用loader

在需要使用某一个loader时，第一步当然是要安装这个loader，比如

npm i babel-loader -D
复制代码

然后在配置文件中使用这个loader

{
 ?test:/.js$/,
 ?use: {
 ? ?loader:'babel-loader'
  }
}
复制代码

什么是插件

所谓的插件其实就是对webpack打包流程的一个扩展和补充，让webpack有更多的可能性。能让webpack在打包的过程中干一些额外的事情，并且这些事情是loader不能够完成的。举例子来说：打包中想要压缩下代码，需要压缩插件。需要输出html你需要html的插件等。

如何使用插件

其实使用插件和使用loader差不多，也是在确定使用什么插件的时候先安装插件。举例如下：

npm i html-webpack-plugin -D
复制代码

然后也是在配置文件中使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');
?
const config = {
 ?entry: './path/to/my/entry/file.js',
 ?output: {
 ? ?filename: 'my-first-webpack.bundle.js',
 ? ?path: path.resolve(__dirname, 'dist')
  },
 ?module: {
 ? ?rules: [
 ? ?  {
 ? ? ? ?test: /.(js|jsx)$/,
 ? ? ? ?use: 'babel-loader'
 ? ?  }
 ?  ]
  },
 ?plugins: [
 ? ?new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
?
module.exports = config;
复制代码

小结

因为水平有限，先简单写下基础使用，后期看看针对单独感兴趣的点在写些文章，主要是巩固学习知识点，觉得有帮助欢迎点赞，有错误请指教。

?