说明
玩转webpack课程学习笔记。
Entry
Entry 用来指定 webpack 的打包入口。
1、依赖图的入口是entry.
2、Entry 的用法
单入口：entry 是一个字符串。
module.exports = { entry: './path/to/my/entry/file.js' };
多入口：entry 是一个对象。
module.exports = { entry: { app: './src/app.js', adminApp: './src/adminApp.js' } };
Output
Output 用来告诉 webpack 如何将编译后的文件输出到磁盘.
1、Output 的用法
单入口配置：
module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, };
多入口配置：通过占位符确保文件名称的唯一。
module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, };
Loaders
webpack开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。本身是一个函数，接受源文件作为参数，返回转换的结果。
1、常见的 Loaders
| 名称 | 描述 |
| babel-loader | 转换ES6，ES7等JS新特性语法 |
| css-loader | 支持.css文件的加载和解析 |
| less-loader | 将less文件转换成css文件 |
| ts-loader | 将TS转换成JS |
| file-loader | 进行图片，字体等的打包 |
| raw-loader | 将文件以字符串的形式导入 |
| thread-loader | 多行程打包JS和CSS |
2、Loaders 的用法
test：指定匹配规则use：指定使用的loader名称
const path = require('path'); module.exports = { output: { filename: 'bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }
Plugins
插件用于 bundle 文件的优化，资源管理和环境变量注入，作用于整个构建过程。
1、常见的 Plugins
| 名称 | 描述 |
| CommonsChunkPlugin | 将chunks相同的模块代码提取成公共js |
| CleanWebpackPlugin | 清理目录结构 |
| ExtractTextWebpackPlugin | 将css从bunlde文件里提取成一个独立的css文件 |
| CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
| HtmlWebpackPlugin | 创建html文件去承载输出的bundle |
| UglifyjsWebpackPlugin | 压缩JS |
| ZipWebpackPlugin | 将打包出的资源生成一个zip包 |
2、Plugins 的用法
放到 plugins 数组里
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 module.exports = { output: { filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
Mode
Mode 用来指定当前的构建环境是：production、development 还是 none，设置 mode 可以使用 webpack 内置的函数，默认值为 production。
1、Mode 的内置函数功能
