webpack4知识点总结归纳

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，webpack4 是 webpack 当前最新的主版本。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。。在我们做 vue 的项目时，对 webpack 一定不陌生，在使用 es6 语法，打包项目的时候都使用到 webpack。下面雷雪松给大家总结归纳一下 webpack4 知识点。

在 webpack 中，所有的静态资源都可以被处理为一个模块，包括 js 文件、img 图片、css 样式、font 字体。webpack 里面有 5 个非常重要的概念：入口 (Entry)、出口(Output)、Loader(加载器)、插件(Plugins) 和 mode 模式。

Entry（入口）

Entry：定义 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。配置 entry 属性，来指定一个入口起点。

module.exports = {entry: './path/to/my/entry/index.js'};

Output（出口）

Output：定义 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。

module.exports = {
entry: './path/to/my/entry/index.js',
output: {path: path.resolve(__dirname, 'dist'),
filename: 'webpack.bundle.js'
}
};

Loader（加载器）
Loader：webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。webpack loader 被用于转换某些类型的模块。更多 webpack 官网推荐加载器列表。

在 webpack 的配置中 loader 有两个目标：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

module.exports = {
output: {filename: 'webpack.bundle.js'},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader'}// 加载文件原始内容（utf-8）]
}
};

Plugins（插件）
Plugins：插件接口功能极其强大，可以用来处理各种各样的任务。比如：打包优化、压缩、重新定义环境中的变量。webpack Plugins 用于执行范围更广的任务。更多 webpack 官网推荐插件列表。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader'}
]
},
plugins: [new HtmlWebpackPlugin({template: './src/index.html'}) // 该插件将为你生成一个 <a href="https://www.leixuesong.com/tag/html">HTML</a> 文件，将所有 webpack 包插入 到 body 下的 script 标签中。]
};

Mode（模式）

Mode：区分开发环境和生成环境，这个很简单，只有两种，development 开发模式和 production 生产模式。

在雷雪松看来，如果你掌握了《webpack4 知识点总结归纳》里面的内容，你就基本入门了，可以对照这 webpack 官网学习更多知识。