webpack5学习笔记-03 webpack使用（1）初步使用webpack

这篇我们通过一个简单的网页项目初步接触webpack的使用。
在正式使用前，由于webpack是安装在本地的，我们不能直接使用命令操作，需要在package.json中进行相关配置。

"start": "webpack"

启动时使用npm run start/yarn start 启动即可。
在项目的根目录下，创建webpack.config.js，代码如下:

const path = require('path');

module.exports = {
    entry:'./src/index.js',  //入口文件
    mode:'production', //开发模式
    output:{
        filename:'main.[hash:8].js',
        //设置打包的路径
        path:path.resolve(__dirname,'./dist')  
    }
}

关于这里的[hash:8]目的是为创建的文件名中加入一段8位数哈希值，有利于强缓存的设置，也就是如果服务器资源更新，而本地缓存也生效时，由于本地缓存文件名和服务器文件名不一致，也可以从服务器获取到最新的资源。
这时，通过入口文件webpack就可以正常进行打包了，后面我们会继续学习webpack的其他功能和配置。