关于webpack的基本使用

webpack是一个静态资源打包工具

我们将webpack输出的文件叫做bundle

开发模式：仅能编译JS中的ES Module语法

生产模式：能编译JS中的ES Module 语法，还可以压缩js代码

先设置入口文件main.js

初始化

1	npm init -y

下载依赖的webpack包

1	npm i webpack webpack-cli -D

调用webpack包里面的打包工具 --开发环境

1	npx webpack ./src/main.js --mode=development

小结： webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错

基本配置

1.entry（入口）

指示webpack从哪个文件开始打包

2.output（输出）

指示webpack打包完的文件输出到那里去，如何命名等

3.loader（加载器）

webpack本身只能处理js，json等资源，其他资源需要借助loader，webpack才能解析

4.plugins（插件）

扩展webpack的功能

5.mode（模式）

主要两种模式：

开发模式：development

生产模式：production

先在目录下面创建一个文件

1	webpack.config.js

在webpack里面配置

const path = require("path") // nodejs核心模块，专门用来处理路径的问题

module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 文件的输出路径
    // __dirname nodejs 的变量，代表当前文件的文件夹目录
    // path.resolve()方法返回一个绝对路径
    path: path.resolve(__dirname, "dist"), // 绝对路径
    filename: "main.js"
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
    ]
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  // 模式
  mode: "development"
}

开发模式介绍

是我们开发代码的时候的模式

主要做两件事：

1，编译代码，是浏览器能识别通过

2.代码质量检查，树立代码的规范

文章作者: Mr. Fortunate

文章链接: https://www.fortunate.cool/2023/02/19/%E5%85%B3%E4%BA%8Ewebpack%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/

webpack javascript 前端