webpack从入门到原理（基础五）——开发模式配置及生产模式准备

i东东
275 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

这一篇主要写了对html资源的处理，开发模式配置，以及生产模式准备工作。

html资源处理

在之前使用的过程中发现,public中的html资源在打包的时候并没有被打包的,并且需要手动去引入打包好的js资源,在资源较多的情况下如果存在依赖关系，很容易会出错,所以希望他可以自动引入打包生成的文件。

插件使用

参考官方文档进行安装:

npm install --save-dev html-webpack-plugin

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
    new HtmlWebpackPlugin()
],

运行打包会发现dist目录下会出现index.html也被打包到了dist目录下,并且自动引入了打包生成的文件,但是发现其他DOM元素不见了,这个时候就需要进行如下配置,增加template,表示以public/index.html为模板，创建新的html文件，这样新的html结构就会和原来的保持一致，并自动引入打包的资源。

new HtmlWebpackPlugin({
  template: path.resolve(__dirname, 'public/index.html')
})

扩展

通过上面对html的处理,打包后会发现html文件中引入的script标签是下面的样子,多了一个defer,下面就记录一下defer的作用。

<script defer="defer" src="static/js/main.js"></script>

这个就需要了解浏览器的运行机制,浏览器在解析html的过程中，如果遇到一个没有任何属性的script标签，就会暂停解析，先发送网络请求去获取JS脚本的代码内容，然后让JS引擎执行改代码，当JS代码执行完毕之后才会继续进行解析，这样script就阻塞了html的解析，那么假如JS脚本的网络请求的响应很慢或者执行时间过长，就会导致用户看不到页面得内容。

async

async 表示异步，当浏览器遇到带async属性的script标签时，这个script标签的网络请求就是异步的，不会阻塞浏览器解析html，一旦当网络请求响应成功后，如果此时html还没有解析完成浏览器会直接暂停解析，先让JS引擎去执行JS代码，执行完毕之后再继续解析html。

注意：这样的话就表示async的执行是不可控的如果在异步的script标签中含有获取DOM元素的操作，就有可能无法获取到DOM元素，如果存在多个async，他们的执行顺序也完全依赖于网络传输的速度，谁先成功JS引擎就会先执行谁！

defer

defer 表示延迟,当浏览器遇到带有defer的script标签时，获取这个script脚本的网络请求也是异步的，不会停止解析浏览器解析html。当网络请求响应成功，如果此时html还没有解析完成，浏览器并不会暂停解析去执行JS代码，而是会等待html解析完毕之后再去执行JS代码。

注意：如果存在多个有defer属性的script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

开发模式配置

因为现在更改src目录下内容，想看更改后的结果的时候还需要重新npx webpack进行打包，会大大拖慢开发的速度，所以需要通过开发模式的配置来实现实时更新

插件使用

需要安装下载：webpack-dev-server

npm i webpack-dev-server -D

配置:

// webpack.config.js
module.exports = {
    ...
 // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
}
    ...

安装配置完成之后运行npx webpack server会出现如下图，浏览器会自动打开

image.png 当src下文件更改，保存之后,就会自动重新编译，浏览器也会显示最新的内容

image.png

不同

  1. 开发模式配置之后运行打包，必须要用npx webpack server,否则即使配置了开发模式也不会生效
  2. 删除之前的dist目录,运行npx webpack server,发现现在并不会生成新的dist目录，因为在开发模式下打包的内容是在内存中进行打包编译的。

生产模式准备

生产模式是开发完成代码之后，将代码部署上线的模式，在生产模式下需要对代码从运行速度和打包速度两方面进行优化。

更改配置文件

首先在根目录创建一个config目录下面有两个文件为webpack.dev.js开发模式配置文件,webpack.prod.js生产模式配置文件。然后对两个文件进行如下更改。

因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件

webpack.dev.js开发模式：

image.png

webpack.prod.js生产模式：

image.png 更改完成之后的运行命令如下可以进行打包测试：

开发模式：
npx webpack serve --config ./config/webpack.dev.js

生产模式:
npx webpack --config ./config/webpack.prod.js

配置运行指令

为了方便运行不同模式的指令，我们可以将指令定义在 package.json 中 scripts 里面：

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

配置之后的运行命令:

开发模式：
npm start 或 npm run dev

生产模式：
npm run build

小结

以更文促进学，持续不断进步,加油，只要还有明天，今天就永远是起跑线！

avatar
文章
阅读
粉丝