1. 要操作的内容展示：
2. 首先用模块化的思想将需要使用的js模块暴露出来。（参考04_01.webpack打包初体验）
3. 然后用main.js将需要使用的js引入进来（参考04_01.webpack打包初体验）
4. 以上做完以后，在全局安装一次webpack
npm i webpack -g
- 然后在要做操作的对应根目录下执行一次下面的代码：
npm i webpack -D
5. 在根目录创建一个webpack.config.js
/*
* @Author: Robyn
* @Date: 2017-11-16 17:53:11
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-16 17:53:11
*/
// 这个配置文件里面使用node的方式来编写
// 该配置文件必须向外暴漏一个配置对象, 供将来的webpack工具调用
const path = require('path');
module.exports = {
// 入口
entry: path.resolve(__dirname, './src/main.js'),
// 输出
// webpack在打包文件的时候, 提供了一些变量, 有一个chunkhash变量
// 它是值是根据打包后的文件内容计算出来的, 为了解决用户缓存的问题,
// 我们一般会把这个变量的值拼接到我们的文件中
output: {
path: path.resolve(__dirname, 'dist'), // 输出路径,一般起名为dist目录
filename: 'bundle_[chunkhash:8].js' // 打包后的文件名, 一般起名为bundle.js,[chunkhash:8]的作用是给文件添加唯一的标识符，预防浏览器缓存
}
};
6.在根目录执行以下命令：
webpack
7. 然后在index.html手动引入bundle.js文件
图片.png
7. 查看效果
