[JavaScript知识库]webpack的安装、配置和使用

1.安装之前
创建空白项目,运行npm init –y 命令,初始化包管理配置文件 package.json,之后新建src源代码目录，新建文件

2.webpack的安装
在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
此时在package.json中会出现

3.webpack的配置
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
    mode:"development"
}

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

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

4.webpack的使用
在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建，此时会生成dist文件夹，在html文件中引入main.js文件

此外，在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
此时可以自定义打包的入口和出口：
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下

const path = require('path')

module.exports = {
    mode:"development",
    // entry:'指定要处理哪个文件'
    entry:path.join(__dirname,'./src/index.js'),
    // 指定生成的文件要存放在哪里
    output:{
        // 存放到目录
        path:path.join(__dirname,'dist'),
        // 生成的文件名
        filename:'main.js'
    }
}