1、webpack在构建包的时候会按目录进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀。
resolve: {
extensions: ['', '.js', '.json']
}
然后我们想要加载一个js文件时，只要require(‘common’)就可以加载common.js文件了。
2、当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：
externals: {
"jquery": "jQuery"
}
这样我们就可以放心的在项目中使用这些API了：var jQuery = require("jQuery");
3、webpack核心原理
- 一切皆模块
- 按需加载
4、开发模式和生产模式
"scripts": {
// 运行npm run build 来编译生成生产模式下的bundles
"build": "webpack --config webpack.config.prod.js",
// 运行npm run dev来生成开发模式下的bundles以及启动本地server
"dev": "webpack-dev-server"
}
5、webpack CLI 和 webpack-dev-server
向webpack-dev-server传入参数的方式：
- 通过webpack.config.js文件的"devServer"对象
- 通过CLI选项
// 通过CLI传参
webpack-dev-server --hot --inline
// 通过webpack.config.js传参
devServer: {
inline: true, // 为入口页面添加“热加载”功能
// 开启“热替换”，即尝试重新加载组件改变的部分（而不是重新加载整个页面）
hot:true
}
如果两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面。
// 当资源发生改变，以下三种方式都会生成新的bundle，但是又有区别：
// 1. 不会刷新浏览器
$ webpack-dev-server
//2. 刷新浏览器
$ webpack-dev-server --inline
//3. 重新加载改变的部分，HRM失败则刷新页面
$ webpack-dev-server --inline --hot
6、entry：字符串，数组和对象
Enter配置项告诉Webpack应用的根模块或起始点在哪里，它的值可以是字符串、数组或对象。这看起来可能令人困惑，因为不同类型的值有着不同的目的。
（1）数组类型
如果你想添加多个彼此不互相依赖的文件，你可以使用数组格式的值。
例如，你可能在html文件里引用了“googleAnalytics.js”文件，可以告诉Webpack将其加到bundle.js的最后。
（2）对象
现在，假设你的应用是多页面的（multi-page application）而不是SPA，有多个html文件（index.html和profile.html）。然后你通过一个对象告诉Webpack为每一个html生成一个bundle文件。
以下的配置将会生成两个js文件：indexEntry.js和profileEntry.js分别会在index.html和profile.html中被引用。
用法：
//profile.html
<script src=”dist/profileEntry.js”></script>
//index.html
<script src=”dist/indexEntry.js”></script>
7、output：“path”项和“publicPath”项
（1）path：告诉Webpack结果存储在哪里
（2）publicPath：被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值
8、loader自身的配置
9、加载器（loader）和插件（plugins）
Loader处理单独的文件级别并且通常作用于包（bundle）生成之前或生成的过程中。
而插件则是处理包（bundle）或者chunk级别，且通常是bundle生成的最后阶段。一些插件如commonschunkplugin甚至更直接修改bundle的生成方式。
