Webpack系列——基础知识

定义

webpack是一个模块打包工具。

有一些语法，如 ES Module 模块引入方式， import ... from '...' 的语法，浏览器并不能识别，webpack 能将这些语法进行转换翻译使得浏览器能识别、正确的运行代码。

1.ES module 模块引入方式

a.js

---

function fun() { ... }

export default = fun;

b.js

---

import fun from './a.js'

new fun();

2.CommonJS 模块引入规范(Node.js)

a.js

---

function fun() { ... }

module.exports = fun();

b.js

---

var fun = require('./a.js');

new fun();

3.ADM

4.CMD

5. 其他方式等

webpack 对这些模块语法都可以识别

安装

前提：已安装好 Node.js

进入项目文件夹

npm init

初始化项目后文件夹下会生成 package.json 文件

npm install webpack --save-dev
npm install webpack-cli --save-dev

安装 webpack 、webpack-cli 工具

不安装 webpack-cli 将无法正常运行 webpack 或者 npx webpack 这样的命令

npx webpack -v

查看项目安装的 webpack 版本号

npm info webpack

查看 webpack 历史版本信息

npm install webpack@4.16.5 webpack-cli -D

指定版本号安装

不推荐 npm install webpack webpack-cli -g 全局安装 webpack

---

使用 webpack 翻译 index.js

npx webpack index.js

webpack 翻译好的文件会在 dist 文件夹下。

---

webpack的配置文件

webpack.config.js（默认的配置文件必须是这个名字）

const path = require('path')
module.exports = {
    // mode 打包模式，
    // development 模式打包，代码不被压缩
    // production 模式打包，代码进行压缩
    mode: 'production',
    // 项目打包入口文件（指明打包从哪个文件开始打包）
    entry: './index.js',
    // 打包输出位置（打包生成的文件存放位置）
    output: {
        filename: 'bundle.js',  // 输出文件的名称
        // 输出的文件夹位置，相对路径
        // __dirname 表示当前文件所在的路径
        path: path.resolve(__dirname， 'bundle') // 相对于当前配置文件所在路径的bundle文件夹
    }
}

在配置文件进行配置后，运行 npx webpack进行打包

如果配置文件是其他名字，如 webpackconfig.js， 可如下运行命令：

npx webpack --config webpackconfig.js

指定文件为配置文件进行打包

在项目的 package.json 文件中的 script 部分可以进行配置 webpack 的打包命令

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.64.3",
    "webpack-cli": "^4.9.1"
  }
}

script 中配置了 "bundle": "webpack"后可不使用 npx webpack的命令形式进行打包，

运行 npm run bundle即可进行打包

打包方式总结

1. 安装 webpack 后运行 webpack index.js 使用webpack自带默认设置以及指定打包入口文件进行打包

2. 在项目中安装 webpack ，运行 npx webpack index.js进行打包

3. npm scripts的方式在 package.json 文件进行配置script 脚本命令，运行 npm run bundle(这个命令实际会被翻译执行 webapck )