《Webpack实战入门、进阶与调优（第2版）》- 第一章 webpack简介之打包

书接上回，本节重点关注webpack、webpack-dev-server的运用

注意 ⚠️

这本书中使用的webpack版本较老，我现在使用的是webpack5+，配置方式按照官网介绍的来，只要能跑起来就可以；为了对比说明问题，还是使用a.js、b.js。

前提代码

index.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 手动引入npm run build相关命令打包的main.js -->
  <script src="dist/main.js"></script>

  <!-- <script src="./main-handwrite.js"></script> -->
  <!-- <script src="./main-custom.js"></script> -->
</body>
</html>

index.js

js 复制代码

import a from './a.js'

a()

a.js

js 复制代码

export default function () {
  console.log('print b')
}

webpack方式

package.json

json 复制代码

{
  "name": "webpack-way",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:production": "npx webpack --entry=./index.js --mode=production",
    "build": "npx webpack --entry=./index.js --mode=development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.91.0"
  }
}

咱们先不关注webpack打包配置的细节，在此package.json中

npm run build:production 生产模式打包
npm run build 开发模式打包

打包结果

先看npm run build:production

代码已经经过webpack解析，看不出如何组织的

再看npm run build

代码没有截取全，根据说明，我们在package.json中加一行

js 复制代码

    "build:dev": "npx webpack --entry=./index.js --mode=development --devtool=false"

再执行。这时候，我们得到可读的，打包后的代码。

效果&结论

从dist/main.js中可以看到，webpack把index.js、a.js打包到一个文件中；并且包含在一个IIFE（立即执行函数）中。解决了下面两个问题

全局作用域污染问题（IIFE带来的好处）
模块依赖顺序（暂未看到明显效果，后面出个例子讲解）

webpack-dev-server

使用场景：开发过程中，不太可能频繁的手动打包；也不可能把webpack的所有配置项都写在命令行中。这时候我们需要webpack-dev-server、维护一个webpack.config.js文件来提高开发效率。

webpack.config.js

js 复制代码

module.exports = {
  entry: './index.js',
  mode: 'development',
  devtool: false,
  devServer: {
    static: './',
  },
}

在package.json中新增

json 复制代码

  "serve": "npx webpack serve"

同时所有命令的webpack参数都可以去掉，因为webpack会优先使用配置文件，如下图

所以package.json中scripts更新为

json 复制代码

  "scripts": {
    "build": "npx webpack",
    "serve": "npx webpack serve"
  },

注意 ⚠️

（你可能注意到，原来build对应的三个命令，变成了现在的一个，mode等参数的不同取值，暂时忽略不考虑，后面会补上）

打包效果

跟npx webpack效果相同，区别在于：webpack-dev-server运行时，打包的文件在内存中（你把dist文件夹删掉看看效果）

效果&结论

提升开发效率

(未完待续，详见下一节) 1.2 打包代码分析

《Webpack实战 入门、进阶与调优（第2版）》- 第一章 webpack简介之打包

书接上回，本节重点关注webpack、webpack-dev-server的运用

注意 ⚠️

前提代码

webpack方式

打包结果

效果&结论

webpack-dev-server

注意 ⚠️

打包效果

效果&结论

《Webpack实战入门、进阶与调优（第2版）》- 第一章 webpack简介之打包