04_02.webpack配置文件使用

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. 查看效果