https://www.webpackjs.com/concepts/ * webpack 是静态模块打包器（module bundler），递归地构建依赖关系图，查找需要的每个模块，打包成一个或多个bundle。 * 配置文件， webpack.config.js， 从webpack v4.0.0， 可以不用引入一个配置文件。 * 入口（entry）, 构建内部依赖图的开始模块。webpack会找出和入口起点有直接和间接依赖的其他模块和库。在配哦之文件中通过entry属性配置， 可以配置一个或多个。默认值是./src。 ``` module.exports = { entry: './src/index.js' } ``` * 出口（output）, 输出创建的bundles的位置，以及如何命名这些文件。默认值是 ./dist。 在配置文件中通过output属性配置。 ``` const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; ``` 以上首先导入了path模块， path是Node.js的基本模块， 用来操作文件路径。 * 生成(emit，emitted), 产生bundle文件 ，是“生产(produced)”或“释放(discharged)”的特殊术语 * loader, 让webpack能够处理非JavaScript文件。可以将所有类型的文件转换为webpack能够处理的有效模块。 在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。 ``` const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; ``` 以上的作用是require()/import 语句中被解析为 '.txt' 的路径时， 在打包之前，使用raw-loader转换一下。 - test 属性，标识应该被对应的loader进行转换的某个或某些文件 - use属性， 进行转换时，使用哪个loader * 插件（plugins）, 执行范围更广的任务，包括打包优化、压缩和重新定义环境中的变量等。 使用方式： 先require(), 再添加到 plugins组件中。 ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; ``` * 模式， 通过mode参数设置， development 或production, ``` module.exports = { mode: 'production' }; ```