webpack4知识点总结归纳

WEB前端 Nodejs学习 2019年9月19日

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 属性，来指定一个入口起点。
[cc lang=”javascript”]module.exports = {
entry: ‘./path/to/my/entry/index.js’
};[/cc]

Output（出口）
Output： 定义 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
[cc lang=”javascript”]
module.exports = {
entry: ‘./path/to/my/entry/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘webpack.bundle.js’
}
};
[/cc]

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

在 webpack 的配置中 loader 有两个目标：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
[cc lang=”javascript”]module.exports = {
output: {
filename: ‘webpack.bundle.js’
},
module: {
rules: [
{ test: /\.txt$/, use: ‘raw-loader’ }// 加载文件原始内容（utf-8）
]
}
};[/cc]

Plugins（插件）
Plugins：插件接口功能极其强大，可以用来处理各种各样的任务。比如：打包优化、压缩、重新定义环境中的变量。webpack Plugins 用于执行范围更广的任务。更多webpack官网推荐插件列表。
[cc lang=”javascript”]const HtmlWebpackPlugin = require(‘html-webpack-plugin’); // 通过 npm 安装
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: ‘raw-loader’ }
]
},
plugins: [
new HtmlWebpackPlugin({template: ‘./src/index.html’}) //该插件将为你生成一个 HTML 文件， 将所有 webpack 包插入 到body下的script 标签中。
]
};[/cc]

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

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

来源：webpack4知识点总结归纳