http://www.css88.com/doc/webpack/
- 入口起点(Entry Points)
单个入口
const config = {
entry: './path/to/my/entry/file.js'
}
多入口
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
根据经验：每个 HTML 文档只使用一个入口起点。
- 输出(Output)
即使可以存在多个入口起点，但只指定一个输出配置。
const config = {
output: {
filename: 'bundle.js', 编辑文件的文件名，推荐：// main.js || bundle.js || index.js
path: '/home/proj/public/assets', 一个绝对路径，此路径是你希望一次性打包的目录。
chunkFilename : "[name]_bundle.js?v=[hash]", 异步加载模块输入 异步加载写法：require(['hotel']);
sourceMapFilename: "[file].map?v=[hash]" JavaScript 文件的 SourceMap 的文件名
}
};
- 加载器(Loaders)
loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。
例如，可以使用loader告诉webpack加载css文件，或者将TypeScript转为Javascript
有三种方式使用loader：
- 通过配置
- 在require语句中显示使用
- 通过CLI
(一) 安装
本地安装
npm install webpack --save-dev
全局安装：全局安装之后，可以随地使用webpack命令
npm install webpack -g
(二) 起步
mkdir webpack-demo && cd webpack-demo //创建webpack-demo文件夹，并进入此文件夹下命令行
npm init -y
npm install --save-dev webpack
在 index.js 中打包 lodash 依赖，首先我们需要安装 lodash。
npm install --save lodash
现在，在此文件夹下运行 webpack ，其中，index.js是输入文件，bundle.js 是输出文件。输出文件已打包此页面所需的所有代码
如果未全局安装webpack 则需要在.bin文件夹下执行，
./node_modules/.bin/webpack app/index.js dist/bundle.js
若全局安装，则在webpack-demo下执行
webpack app/index.js dist/bundle.js
在webpack-demo/dist下bundle.js则是打包之后文件
使用带有配置的 webpack：
对于更复杂的配置，我们可以使用配置文件，webpack 会引用它来打包代码。然后创建一个 webpack.config.js 文件，你可以使用以下配置表示上述 CLI 命令。
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
运行命令：webpack --config webpack.config.js
如果存在 webpack.config.js，webpack 命令将默认选择使用它。
运行命令：webpack
使用引入 npm 的 webpack：
考虑到用 CLI 这种方式来运行 webpack 不是特别方便，我们可以设置一个快捷方式。像这样调整 package.json：
"scripts": {
"build": "webpack"
}
现在你可以通过使用 npm run build 命令来实现与上面相同的效果
你可以通过向 npm run build 命令添加两个中横线，给 webpack 传递自定义参数，例如：npm run build -- --colors。
代码拆分
使用 webpack 可以完成的两类代码分离工作：分离资源，实现缓存资源和并行加载资源
分离第三方库(vendor)：
一个典型的应用程序，会依赖于许多提供框架/功能需求的第三方库代码。不同于应用程序代码，这些第三方库代码不会频繁修改。
如果我们将这些库(library)中的代码，保留到与应用程序代码相独立的 bundle 上，我们就可以利用浏览器缓存机制，把这些文件长时间的缓存到用户的机器上。
把第三方代码和应用本身的代码一起打包是非常低效的。因为浏览器会根据缓存头来缓存资源文件，如果文件没有被改变，文件将会被缓存从而不用去再次请求 cdn。
