1. 创建webpack.config.js文件
2. 写入以下代码

   const path = require('path');
   
   module.exports = {
       mode: 'development',
       entry: './src/index.js',
       output: {
           path: path.resolve(__dirname, 'dist'),
       filename: '[name].[contenthash].js',
       },
   };
   

   代码含义：
   1. 将当前目录下的index.js进行转译
   2. 新建一个dist目录
   3. 转译之后的文件放在dist目录
   4. 转译之后的文件名为main.672bada0254364583396.js
   5. 当你修改index.js后，再次启动webpack，会生成新的main.xxxxxxx.js文件

生成的main.672bada0254364583396.js文件，在浏览器第一次访问的时候会被缓存的电脑的内存或者缓存里；于是，当浏览器第二次访问的时候，无需再去从服务器下载该文件，直接从本地硬盘或内存里读取便可，从而节省打开网页的时间。

HTTP缓存

1. 第一次访问百度，百度服务器会返回index.html
2. index.html会引入1.css、2.css、1.js、2.js
3. 如果百度服务器给出的响应头Cache-Control:public, max-age=31536000,那么浏览器自动缓存该文件到本地电脑内存里一年。
4. 浏览器缓存是与文件名绑定的，当1.js修改后，webpack会生成新的11.js，那么浏览器就会引用新的11.js
5. 浏览器不能缓存首页index.html，因为首页短时间内不会变的话，那更新css、js有毛用。