记录学习路上的一点小知识。

npm网上找教程配置完之后准备开始配置webpack。

1、配置package.json

package.json作用：该文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

创建package.json:

手动创建：
  直接在项目根目录新建一个package.json文件，然后输入相关的内容

自动创建
  在项目根目录下执行npm init -y

详细配置文件内容可点击 · package.json · 了解

（src文件夹，html、js文件需手动创建且未配置指定文件情况下严格命名为index，构建层级参考文章第二部结尾的目录层级）

2、安装webpack

终端运行：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

版本号一定要对上，否则可能会报错，可查询webpack官网找对应的版本号。

安装成功后，项目根目录中创建webpack.config.js的webpack配置文件，并初始化基本配置，如下：

mode：是用来指定构建模式，可选值有 development 和 production

module.exports={
    mode:'development'
}

并且在package.json的scripts的节点下，新增dev脚本，如下：

scripts节点下的脚本，可以通过 npm run 执行，例如这里的 npm run dev

"scripts":{
    "dev":"webpack"
}

最后在终端中运行npm run dev命令，启动webpack进行项目的打包构建

运行成功结果：

运行失败结果

原因：少创建了一个js文件或者放错位置，以下展示基本文件目录结构（dist文件夹及内容是npm run dev自动生成的）

至此，webpack第二大步已配置完成

了解：此时main文件里的代码未被压缩，（若下载了jquer，部分代码会被jquery压缩，注释仍然存在），将webpack.config.js中mode的值改为production（production为发布上线模式，development为开发模式）就可以压缩代码了（后续会配置）

在webpack.congig.js文件下配置，如下：

每次修改完源代码的时候，都需要手动打包构建，比较繁琐。自动打包和构建当然是自动化以及方便程序员编码的首选。

webpack-dev-serve会启动一个实时打包的http服务器。

命令行运行：

npm install webpack-dev-server@3.11.2 -D

配置仅在package.json中更改scripts内容：

 "scripts": {
        "dev": "webpack serve"
    },

如产生以下报错说明加载不到webpack-cli：

解决办法：在执行以下命令：

npm install webpack-cli --save-dev

再执行 npm run dev，出现以下结果说明配置没问题，并且可以通过http://localhost:8080/src/ 去访问页面：

bundle文件位置发生更换（看不见了，原来目录下的bundle可以删了），那么index.html里的导入路径也需更换为：

此时更改js代码，页面已经具有实时刷新的功能了。

预知后事如何请看下一章节。