JZTXT

webpack

发布时间 2023-05-27 14:56:32作者: Masahiko

webpack

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的

基本使用

  1. 项目根目录下执行 npm init –y 初始化包管理配置文件 package.json

  2. 执行 npm install webpack@5.42.1 webpack-cli@4.7.2 -D 安装 webpack 相关的两个包

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

    module.exports = {
    mode: 'development' //mode用来指定构建模式。可选值有 development 和 production
}

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

    "scripts": {
    "dev": "webpack" //script 节点下的脚本，可以通过 npm run 执行
}

5.运行 npm run dev 命令，启动webpack进行项目的打包构建

webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

自定义打包的入口与出口

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

  1. 默认的打包入口文件为 src -> index.js

  2. 默认的输出文件路径为 dist -> main.js

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

```js
const path = require('path') //导入 node.js 的路径的模块

module.exports = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
}
```

`./`代表目前所在的目录。 `../`代表上一层目录。 `/`代表根目录。