借助webpack-dev-server实现webpack项目热编译

2023年6月26日 207次阅读 来源: 铁匠一锤治百病

0 前言

0.1 工具版本

考虑到前端框架更新较快，这里将本次使用到的工具版本展示如下：
npm@5.8.0
node@8.11.1
webpack@4.6.0
webpack-cli@2.0.15
html-webpack-plugin@3.2.0
webpack-dev-server@3.1.3

0.2 文件结构

本次测试项目的文件结构如下：

myproject
   │  package-lock.json
   │  package.json
   │  
   └─node_modules
   │  
   └─src
           index.html
           index.js

1 准备工作

1.1 项目初始化

既然是实现webpack项目热编译，那第一步一定是需要一个基于webpack的项目啦。什么？你已经初始化好了，那么请跳过本节（章节1.1 项目初始化） ，直接阅读webpack-dev-server的安装与启用。

1.1.1 创建一个npm包

在命令提示符下进入项目根目录，输入命令如下：

npm init --yes

这样在项目根目录下会创建一个简单的package.json 文件。

如果package.json文件顺利创建，命令提示符会有如下提示：

Wrote to “我是你的项目根目录”\package.json:

{
  "name": "项目根目录文件夹叫啥这里就是啥。建议英文目录，不要像我是中文，还这么长",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1.2 引入依赖

1.2.1 引入webpack依赖

接下来要在项目中安装webpack包依赖，一个webpack项目怎么能没有webpack包呢，dei不dei。

这里选择在项目本地安装，开发时依赖，故在命令提示符中输入：

npm i -D webpack

安装webpack包成功后大概会看到类似这样的东西如下：

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN fsevents@1.2.0 had bundled packages that do not match the required version(s). They have been replaced with non-bundled versions.
npm WARN 测试项目文件夹@1.0.0 No description
npm WARN 测试项目文件夹@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.6.0
added 407 packages from 327 contributors in 112.059s

其实只要看到最后一行显示 ‘added xxx packages from xxxx contributors in xx.xx s’ 就可以了，只要没有 Error 就行，WARN不影响项目运行。

1.2.2 引入webpack-cli 依赖

有了webpack包，我们还需要webpack-cli作为与webpack交互的命令行接口。没错，’cli’ 这玩意翻译过来就是命令行接口。

类似的，在命令提示符中输入：

npm i -D webpack-cli

安装成功会看到类似的东西如下：

npm WARN deprecated babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
[ .................] | fetchMetadata: WARN deprecated babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recom[ .................] / fetchMetadata: WARN deprecated babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recomnpm WARN deprecated nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN aattt@1.0.0 No description
npm WARN aattt@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@2.0.15
added 476 packages from 246 contributors in 138.819s

1.2.3 引入 html-webpack-plugin依赖

安装html-webpack-plugin，以便webpack能够识别并编译html文件。
类似的，在命令提示符中输入：

npm i -D html-webpack-plugin

安装成功后，会看到类似的东西如下：

npm WARN aattt@1.0.0 No description
npm WARN aattt@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ html-webpack-plugin@3.2.0
added 151 packages from 128 contributors in 28.704s

1.2.4 引入webpack-dev-server依赖

在命令提示符进入项目根目录，输入：

npm i -D webpack-dev-server

安装成功后，会看到类似这样的东西如下：

npm WARN 测试项目文件夹@1.0.0 No description
npm WARN 测试项目文件夹@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-dev-server@3.1.3
added 344 packages from 194 contributors in 77.966s

1.3 配置项目文件

1.3.1 配置 webpack.config.js

具体配置如下：

const path = require('path');
const htmlPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'main':'./src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'[name]_[hash:8].js'
    },
    plugins: [
        new htmlPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
        
}

1.4 启动webpack-dev-server

1.4.1 向package.json添加指令

在pacakge.json的scripts属性对象中，添加一条属性 "start:dev": "webpack-dev-server"。即：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:dev": "webpack-dev-server"
  },

1.4.2 执行命令，启动webpack-dev-server

在命令提示符中，输入：

npm run start:dev

此时，在浏览器访问 localhost:8080/index.html 即可。页面是热编译的，修改编辑器代码后等待3-5s即可查看效果。这种方式不会真的输出文件，如果需要输出文件，只需要在代码开发完成后，手动编译一次即可。

备注：看到这里，还记得我们安装的webpack-cli包吗？它提供了与webpack进行命令行交互的能力。在这里，当npm run start:dev命令执行时，如果我们没有安装webpack-cli包，webpack-dev-server命令就无法被识别啦。

今天就到这里。完

    原文作者：铁匠一锤治百病
    原文地址: https://www.jianshu.com/p/c4efad81e0a4
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞