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 属性，来指定一个入口起点。
1 2 3 | module.exports = { entry: './path/to/my/entry/index.js' }; |
Output（出口）
Output： 定义 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
1 2 3 4 5 6 7 | 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。
1 2 3 4 5 6 7 8 9 10 | module.exports = { output: { filename: 'webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' }// 加载文件原始内容（utf-8） ] } }; |
Plugins（插件）
Plugins：插件接口功能极其强大，可以用来处理各种各样的任务。比如：打包优化、压缩、重新定义环境中的变量。webpack Plugins 用于执行范围更广的任务。更多webpack官网推荐插件列表。
1 2 3 4 5 6 7 8 9 10 11 | 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.xuesongboke.cn/tag/html">HTML</a> 文件， 将所有 webpack 包插入 到body下的script 标签中。 ] }; |
Mode（模式）
Mode：区分开发环境和生成环境，这个很简单，只有两种，development开发模式和production生产模式。
在雷雪松看来，如果你掌握了《webpack4知识点总结归纳》里面的内容，你就基本入门了，可以对照这webpack官网学习更多知识。
2019年10月4日 下午4:29
非技术的路过。