webpack基本概念
在前端工程化中，静态模块打包工具起着不容忽视的作用，webpack作为静态模块打包工具中的佼佼者，值得每一个前端同学去学习。从今天开始，让我们一起来学习webpack吧！
基本概念
什么是webpack
本质上，webpack是一个现代Javascript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
在webpack中，entry、output、loader、plugins等配置项决定了webpack如何构建依赖关键图。我们来依次介绍：
entry
entry指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。
进入入口起点后，webpack会找到有哪些模块和库是入口起点直接或间接依赖的。每个依赖项随机被处理，最后输出到称之为bundles的文件中。
可以通过在webpack中配置entry属性，来指定一个或多个入口起点。
output
output告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件。
基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
loader
webpack自身只理解Javascript，loader让webpack能够去处理那些非JavaScript的文件。
loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack的打包能力对这些模块进行处理。
注意：在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中。
plugins
loader被用于转换某些类型的模块，而plugins则可以用于执行范围更广的任务。
范围包括：从打包优化和压缩，一直到重新定义环境中的变量。
来看一个基本的webpack配置
光说不练假把式，我们一起来撸一个基本的webpack配置，来理解上面提到的配置项。
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
modele.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MyPage',
template: 'public/index.html'
}),
new CleanWebpackPlugin(),
]
}
在上面的基本webpack配置中，我们实现了如下功能：
-
将src/目录下的index.js文件作为依赖关系图的入口文件
-
对后缀为.js或.jsx的文件使用babel-loader进行转换
-
将最终生成的bundles存放到定义在根目录下的dist文件夹中
-
利用HtmlWebpackPlugin根据public目录下的模板文件index.html生成新的html文件
-
利用CleanWebpackPlugin在每次编译前清除/dist目录下的文件。
相信看到这里，大家对基本的webpack概念已经有了自己的印象和理解，眼过千遍不如手过一遍，看完之后记得手敲一遍啊！
结语
这一节我们对webpack的基本概念做了介绍，带着大家撸了一个基本的webpack配置。当然，webpack的配置远远不像眼前这么简单，热替换、支持react、按需加载等复杂一些的配置我们会在后续的章节里继续讲解，最终和大家一起实现一个高性能、功能完善的webpack配置。
我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！
如有问题，欢迎在留言区一起讨论。
