webpack入门学习笔记04 —— 安装和配置webpack开发服务器

2022-11-21 1911阅读

温馨提示:这篇文章已超过631天没有更新,请注意相关的内容是否还可用!

1. 写在前面

在之前的博客中,每次使用webpack打包编译完成之后,我们都需要手动打开编译后的index.html文件,这样对于前端开发的调试很不方便。为了解决这一问题,webpack给出了 「开发服务器」 这一方案。在进行开发的过程中,我们可以使用webpack启动一个开发服务器,来实时查看自己的项目,很方便进行调试。

webpack入门学习笔记04 —— 安装和配置webpack开发服务器

相信很多前端开发者都用过webpack的开发服务器,但是有些开发者不是很了解它。那么在这篇文章中,我就给大家介绍webpack的开发服务器,主要内容包括:

2. 安装webpack的开发服务器

首先执行一下命令来安装webpack的开发服务器:

yarn add webpack-dev-server -D

安装完成之后,我们就可以通过 「npx webpack-dev-server」 命令启动开发服务器,或者在 「package.json」 文件中新建一条脚本,后续就可以很方便地使用 「npm run」 或 「yarn」 来启动开发服务器。脚本配置如下:

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {

"webpack": "^4.32.2", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.5.1" } }

启动本地服务器之后,我们便可以在浏览器中通过 「:8080」 来访问项目了。截图如下:

3. 初步配置webpack的开发服务器

现在开发服务器已经启动了,但是显而易见的是,当前的开发服务器使用的是默认配置,很大程度上不能满足我们开发的需求,比如:

下面我们就讲解一下,如果初步配置开发服务器,完成上述需求。之所以说是初步配置,是因为开发服务器配置内容较多web服务器安装与配置,后面准备单独写一篇博客,讲述开发服务器的详细配置。

其实初步配置开发服务器很简单,在 「webpack.config.json」 文件中新增 「devServer」 属性,该属性是一个对象,我们将一些配置信息写到该对象下即可,配置代码如下:

let path = require("path");
module.exports = {
    devServer: {
        port: 3000,        // 指定开发服务器的端口号
        progress: true,   // 显示开启本地服务器的进度

contentBase: "./build", // 指定本地服务器默认打开的目录 compress: true // 是否对代码进行压缩 }, mode: "development", entry: "./src/index.js", output: { filename: "index.js", path: path.resolve(__dirname, "build") } }

现在再次开启开发服务器,就可以通过 「:3000」 访问到项目的 「build」 目录了,默认寻找该目录下的 「index.html」 文件进行渲染,如果没有则展示该目录下的所有文件。

4. 深入配置webpack的开发服务器

以上就是对webpack开发服务器的安装和初步配置,但是上述的初步配置存在一些问题:我们希望开发服务器启动之后,就会显示我们项目的页面,但是上述配置中,如果要看到项目的页面,一个前提是build目录下必须存在index.html文件。但是这个文件是打包编译后才生成的,所以在开发服务器环境下可能不会存在,而且也不会实时刷新,所以很明显初步配置不能满足我们的开发需求。

正常情况下,我们希望看到的场景是:使用 「npm run」 或 「yarn」 来启动开发服务器之后,就可以实时看到项目的页面,如果项目有代码的更新,页面也要实时更新。要做到这一点,我们需要完成以下步骤:

1) 安装 html-webpack-plugin 插件

执行 「yarn add html-webpack-plugin -D」 进行安装该插件

2) 配置 html-webpack-plugin 插件

安装完成之后,我们就需要到 「webpack.config.js」 文件中配置该插件,其实webpack之所以有这么强大的功能,就是依靠各种各样的插件。所以在webpack配置文件中,肯定会有各种插件的相关配置。这里介绍 「html-webpack-plugin」 插件的配置,其他插件的配置如出一辙。

首先在 「webpack.config.js」 文件中引入安装的 「html-webpack-plugin」 插件,然后新建一个 「plugins」 属性,该属性是一个数组,webpack使用到的插件,都要在这个数组中进行配置。我们先来看一下具体的配置代码:

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")  // 引入安装的插件
module.exports = {
    devServer: {
        port: 3000,        // 指定开发服务器的端口号
        progress: true,   // 显示开启本地服务器的进度
        contentBase: "./build", // 指定本地服务器默认打开的目录
        compress: true       // 是否对代码进行压缩
    },
    mode: "development",    
    entry: "./src/index.js",    
    output: {       
        filename: "index.js",   
        path: path.resolve(__dirname, "build")   

}, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', // 模板文件 filename: 'index.html', // 开发服务器中生成的临时文件 minify: { removeAttributeQuotes: true, // 是否去除文件中的双引号 collapseWhitespace: true // 是否去除文件中的空行 }, hash: true // 引入文件的时候添加哈希值,防止缓存的问题 }), ] }

下面讲述一下以上文件中的一些配置选项:

这里需要说明的是, 「html-webpack-plugin」 插件的配置不仅适用于开发服务器,再进行打包编译的时候,该插件的相关配置也会发挥作用,比如指定的模板、是否删除双引号、是否删除空行等。

3) 创建模板文件

在上述叙述中,我们知道在启动开发服务器的时候,要有一个模板文件,所以我们要在项目中创建一个模板文件。根据上面的配置要求,该文件是位于 「src」 文件夹下的 「index.html」 文件。参考代码如下:




    
    
    
    Document


    

这是一个模板文件

5. 后记

以上就我在学习webpack过程中对开发服务器的一些总结。总的来说,开发服务器就是对当前项目进行打包编译,将生成的文件存放在内存中,然后起一个本地服务。我们在浏览器中访问这个本地服务(如 「:3000」 )来访问内存的 「index.html」 文件,进而看到我们的项目。

而且,这个过程是实时热更新的,一旦项目代码有变化,开发服务器会自动进行打包编译web服务器安装与配置,这样我们看到的项目就是最新的。

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]