Webpack的基本使用
入口文件entry的配置
- 单文件：构建包名称
[name]为main。
module.exports = {
entry: `./index.js`,
}
- 多文件：
module.exports = {
entry: {
"index": `./index.js`,
},
}
key:value 键值对的形式，其中key是构建包名称，即 [name] ，在这里为 index。value是入口路径。入口决定 webapck 从哪个模块开始生成依赖关系图（构建包），每一个入口文件都对应着一个依赖关系图。
- 动态配置入口文件：当构建项目包含多个子项目时，每次增加一个子系统都需要将入口文件写入 webpack 配置文件中，其实我们让webpack 动态获取入口文件，例如：
// 使用 glob 等工具使用若干通配符，运行时获得 entry 的条目
module.exports = {
entry: glob.sync('./project/**/index.js').reduce((acc, path) => {
const entry = path.replace('/index.js', '')
acc[entry] = path
return acc
}, {}),
}
则会将所有匹配 ./project/**/index.js 的文件作为入口文件进行打包，如果你想要增加一个子项目，仅仅需要在 project 创建一个子项目目录，并创建一个 index.js 作为入口文件即可。这种方式比较适合入口文件不集中且较多的场景。
- 动态打包某一子项目：在构建多系统应用或者组件库时，我们每次打包可能仅仅需要打包某一模块。此时，可以通过命令行的形式请求打印某一模块，例如：
npm run build --project components
在打包的时候解析命令行参数：
// 解析命令行参数
const argv = require('minimist')(processs.argv.slice(2));
// 项目
const project = argv('project') || 'index';
然后配置入口
module.exports = {
entry: {
'index': `./${project}/index.js`
}
}
当然你也可以传入其他参数，也可以应用于多个地方，例如resolve.alias中。
HMR相关
Hot Module Replacement是指当我们对代码修改并保存后，webpack将会对代码进行重新打包，并将新的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，以实现在不刷新浏览器的前提下更新页面。
