webpack 是一个现代js应用程序的静态模块打包器。当webpack处理应用程序时，会递归建立一个依赖关系图，包含应用程序需要的每一个模块，然后将所有的这些模块打包成一个bundle。
- 入口 entry 指示应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后， webpack会找出有哪些模块和库是入口起点依赖的。每个依赖随即被处理，最后输出到称之为bundles的文件中。
entry 配置入口的一个简单例子： webpack.config.js
module.exports = { entry: './path/to/my' }
- 出口 output output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认为./dist;基本上， 整个应用结构都会被编译到你指定的输出路径文件中；你可以通过在配置中指定一个output 字段，来配置这些处理过程。
webpack.config.js
const path = require("path"); module.exports = { entry: './path/to/my/entry/file.js', output: { path: 'path.resolve(_dirname, 'dist')', filename: 'my-first-webpack.bundle.js' } }
- loader 让webpack 能够去处理那些非js 文件，（webpack 自身只理解js）,loader 可以将所有类型的文件转化为webpack 能够处理的有效模块， 然后就可以用webpack 的打包能力， 对他们进行处理；
在webpack 配置中loader 有两个目标： 1、test 属性， 用于识别应该被对应的loader进行转换的某个或某些文件 2、use 属性， 表示进行转换时， 应该使用哪个loader
webpack.config.js
const config = { output:{ filename: 'my-first-webpack.bundle.js' }, module:{ rules: [{ test:/.txt$/, use:'raw-loader' }] } }
以上配置中，对一个单独的module 对象定义了rules 属性，里面包含两个必须属性： test和use;这告诉webpack 编译器如下信息： 嘿， webpack, 当你碰到【require/import 语句中被解析为 .txt】时， 在你对它打包之前，先使用raw-loader 转换一下
- 插件 plugins loader 被用于转换某些类型的模块，而插件则用于执行范围更广的任务。插件的范围包括，从打包优化到压缩，一直到重新定义环境中的变量； 想使用一个插件，你只需要require 它，然后把他添加到plugins 中，多数插件可以通过option 自定义；你也可在一个配置文件中因为不同目的而多次使用同一个插件，这时需要使用new 操作符来创建它的一个实例
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack');
const config = { module: { rules:[{ test: /.txt$/,use:'raw-loader }] }, plugin: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] } module.exports = config;
- 模式 通过development 和production 之中的一个， 来设置mode参数， 你可以启用相应模式下的webpack 内置的优化； module.exports = { mode： 'production' }
常见场景
1、分离 app 和第三方库入口
const config = { entry: { app： './src/app.js' , vendors: './src/vendorsjs' } }
这是什么 从表面看， 这告诉我们webpack 从app.js 和vendor.js 开始构建依赖图；这些依赖图是完全分离，相互独立的。这种方式比较常见于只有一个入口起点的单页应用程序。
为什么 此设置允许你使用CommonsChunkPlugin 从应用程序中提取vendor 引用到vendor bundle， 并把vendor 的部分替换为_webpack_require_调用。如果应用程序bundle 中没有vendor 代码,那么你可以在webpack 中实现长效缓存的通用模式
2、输出的高级进阶 以下是使用CDN 和资源hash 的复杂示例 config.js
output: { path: "/home/proj/cdn/assets/[hash]", publicPath: "cdn.example.com/assets/[has…]" }
在编译时不知道最终输出文件的publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运动时动态设置
3、使用loader 的三种方式 配置（推荐）：在webpack.config.js 文件中指定loader; 就用test 和 use 属性的方式 内联： 在每个import 语句中显示指定loader； 可以在import 语句或任何等效于import 的方式中指定loader, 使用！将资源中的loader 分开；分开的每个部分都相当于当前目录解析； import Styles from 'style-loader!css-loader?modules!./styles.css'; CLI: 在shell 命令中指定他们
