实现步骤：

a安装webpack

yarn add webpack@4.41.5 webpack-cli@3.3.10 --dev

b 修改package.json文件中的scripts键

“build”: “webpack --mode=production”

c 创建src\index.js

console.log(‘hello，webopenfather’)

d 测试打包

yarn build

1、webpack配置 ( webpack.config.js

默认入口（entry）：src/index.js

默认出口（output）：dist/main.js

疑惑：如果想自定义呢？

解决：在项目根目录声明webpack.config.js

2、指定入口&出口

1.将src/index.js改为src/qf.js -> 重新build 发现报错因为入口文件不存在 index.js

2.解决：在项目根目录下创建webpack.config.js文件，重写默认入口文件

3.自定义输出打包文件名

const path = require('path')

// 导出配置
module.exports = {
    // 指定入口文件
    // entry: './src/index.js',  默认
    entry: './src/qf.js',//      指定

    // 指定出口文件
    output: {
        // 说明：path.resolve 这是使用node中path模块的方法
        // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
        // 说明：__dirname这是node中的变量  值是动态变化
        // 作用：获取当前文件所在目录路径  webpack.config.js
        // 含义：当前文件所在目录/dist
        path: path.resolve(__dirname, 'dist'),
        filename: 'qf.js'
    }
};

3、多入口&出口

创建home.js和about.js打包

const path = require('path')

// 导出配置
module.exports = {
    // 指定入口文件
    // entry: './src/index.js',  默认
    // entry: './src/qf.js',//   指定
    entry: {
        qf: './src/qf.js',
        home: './src/home.js',
        about: './src/about.js'
    },

    // 指定出口文件
    output: {
        // 说明：path.resolve 这是使用node中path模块的方法
        // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
        // 说明：__dirname这是node中的变量  值是动态变化
        // 作用：获取当前文件所在目录路径  webpack.config.js
        // 含义：当前文件所在目录/dist
        path: path.resolve(__dirname, 'dist'),

        // 默认HTTP请求状态码：200  有请求 、有响应数据
        // 然后浏览器都有缓存机制：304 有请求、有响应【没】有数据  数据来源于浏览器缓存
        // 如果你看过我之前在课件中发的nginx里面有一个词：expires 、gzip  直接不发送请求
        // 缓存机制：文件名  用户第1次访问后根据文件名缓存，第2次就不发送请求
        // 问题：每次项目build上线文件名都一样
        // 你跟新、但是文件名都一样用户还是用的以前的js、css新功能没办法实现.
        // 解决：每次build之后都会产生一个新的文件名
        // filename: 'qf.js'                 // 单个
        // filename: '[name].js'             // 多个 
        // filename: '[name].[hash].js'      // 避免缓存 
        // filename: '[name].[hash:7].js'    // 截取指定 
        filename: '[name].[chunkhash:7].js'  // 内容hash 
        
        // 区别：hash每次都会有一个唯一的标识 只要内容变了 全部重新生成
        //      chunkhash基于每个文件的内容 修改了 只会这个文件重新生成
    }
};

开会去了，未完待续。。。

webpack配置以及下载模块