webpack-dev-server的安装使用教程

目录
  • 作用
  • 安装
    • 运行环境
    • 1.前提：
    • 2.如果是webpack4以上我们还需要安装webpack-cli
    • 2.安装webpack-dev-server
    • 3.编写webpack.config.js
    • 4.配置命令（在package.json内）
    • 5.运行
    • 在目录下没有编译的bundle.js文件
  • 安装html-webpack-plugin
    • 作用
    • 安装
    • 运行

作用

  • 相当于在本地开启了一个服务，我们可以通过http网络请求访问
  • 提高了IO性能，因为webpack-dev-server将我们的文件编译后放到内存里面，以空间换时间
  • 无需我们每次都需要手动编译我们的文件，我们每次保存文件，就会自动的帮助我们编译发布（注意：webpack4以上，也可以通过开启watch属性实现这个功能）

安装

运行环境

  • “webpack”: “^5.33.2”,
  • “webpack-cli”: “^4.6.0”

1.前提：

webpack-dev-server依赖webpack，我们需要先安装webpack

2.如果是webpack4以上我们还需要安装webpack-cli

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

2.安装webpack-dev-server

npm install webpack-dev-server ---save-dev

3.编写webpack.config.js

因为webpack-dev-server完全依赖于webpack，所以我们需要编写webpack的配置文件
例如：

// path 模块解决项目路径问题
const path = require('path')
module.exports = {
    //打包模式，一定要配置，不然打包速度慢很多
    mode: 'development', //开发模式
    // mode:'production',//生产模式

    //入口
    entry: path.join(__dirname, './src/main.js'), // __dirname 是node的通用变量，代表当前项目路径
    output: {
        // 配置打包后文件存放目录
        path: path.join(__dirname, './dist'),
        // 配置打包后文件的名称
        filename: 'bundle.js'
    },
    // 监听文件改动，自动打包
    //  watch: true,
    devServer: {
        contentBase: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前路劲
        compress: true, // 压缩资源
        port: 9000, // 指定服务器的端口号
        open: 'Chrome', // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开
    },
}

其余相关属性，我们可以看看官方文档，有详细的解释：
点击进入官方配置devServer

4.配置命令（在package.json内）

webpack版本4以上的命令配置如下

5.运行

在终端里面运行

npm run dev-server

在目录下没有编译的bundle.js文件

其实是有的，webpack-dev-server将我们的文件编译后，发布存放在内存内，不在物理磁盘上，例如：我们开启后，访问bundle.js是可以访问到的

安装html-webpack-plugin

我们的资源文件webpack已经帮助我们编译放到内存里面了，但是我们index.html依然在物理磁盘上，我需要将index.html同样放置到内存中，这是我们就需要依赖html-webpack-plugin插件

作用

  • 自动在内存中根据指定页面生成一个内存的页面
  • 自动，把打包好的bundle.js追加到页面中，无需我们手动引用

安装

通过npm安装

npm install html-webpack-plugin -D

通过require方法导入模块，并且在plugins中放置一个模块对象

运行

运行webpack-dev-server

到此这篇关于webpack-dev-server的安装使用的文章就介绍到这了,更多相关webpack-dev-server使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

    深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

    webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧. 第一步.安装webpack 新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-de

  • 详解html-webpack-plugin插件(用法总结)

    html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件,如果直接将 html 文件置于 ./src 目录中,用 Webpack 打包时是不会编译到生产环境中的.因为 Webpack 编译任何文件都需要基于配置文件先行配置的. Webpack 插件使用三步曲:安装>引入>配置 npm 安装 npm install --save-dev html-webpack-plugin yarn 安装 yarn add html-webpack-plugin

  • extract-text-webpack-plugin用法详解

    一 背景 最近在做一个项目,项目本身是用vue-cli创建的单页面应用,由于项目扩展需要创建多页面,所以需要对不同的html分别进行css文件打包.于是开始研究extract-text-webpack-plugin插件. 二 插件介绍 打包样式有两种方法,一种是使用style-loader自动将css代码放到生成的style标签中,并且插入到head标签里.另一种就是使用extract-text-webpack-plugin插件,将样式文件单独打包,打包输出的文件由配置文件中的output属性指

  • webpack-merge的使用教程

    目录 为什么要用webpack-merge 安装 目录结构 为什么要用webpack-merge development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异 所以webpack的配置写的差距会非常的大 在开发环境中,我们需要:强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server. 而生产环境目标则转移至其他

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • Vmware下Ubuntu server版安装图文教程

    Vmware下Ubuntu server版安装图文教程

    本文为大家分享了Ubuntu server版安装图文教程,供大家参考,具体内容如下 创建虚拟机步骤 1. 创建虚拟机 2. 登录系统 3. 先启用root用户 4. 对 openssh server进行配置 5. vi /etc/ssh/sshd_config 找到PermitRootLogin without-password一行,改为PermitRootLogin yes 6. 重启 openssh server $ sudo service ssh restart 7. xshell连接虚

  • SQL Server 2012 安装图解教程(附sql2012下载地址)

    SQL Server 2012 安装图解教程(附sql2012下载地址)

    在安装微软最新数据库SQL Server 2012之前,编者先确定一下安装环境:Windonws 7 SP1,32位操作系统.CPU是2.1GHz赛扬双核T3500,内存2.93GB. sql2012下载 http://www.jb51.net/softs/79861.html 安装SQL Server 2012的软硬件环境参数 根据微软的下载提示,32位的Windows 7操作系统,只需下载列表最下面的CHSx86SQLFULL_x86_CHS_Core.box. CHSx86SQLFULL_

  • Microsoft SQL Server 2008安装图解教程(Windows 7)

    Microsoft SQL Server 2008安装图解教程(Windows 7)

    Microsoft SQL Server 2008 安装图解(Windows 7) FoxDie 2010年04月17日 简介 本文详细记录了一次完整的Microsoft SQL Server 2008在Windows 7操作系统上的安装过程.注意:Microsoft SQL Server 2008与Windows 7操作系统存在一定的兼容性问题,在完成安装之后需要为Microsoft SQL Server 2008安装SP1补丁.下面将详细说明整个安装过程. 安装日志 在Windows7操作系

  • SQL SERVER 2014 安装图解教程（含SQL SERVER 2014下载）

    SQL SERVER 2014 安装图解教程（含SQL SERVER 2014下载）

    2015年1月1日,新的一年开始之际,本来应该好好做点有意义的事情来跨个年的.结果,老习惯 - 睡觉之前一定要折腾一下电脑,说干就干,给新到的 DELL 电脑装虚机,下载 SQL SERVER 2014,安装 SQL SERVER 2014. SQL SERVER 2014 安装完成以后,不像 SQL SERVER 2008 R2 会提供一个 BIDS 开发工具,也不像 SQL SERVER 2012 会提供一个 SSDT 开发工具,也就是说 BI 的开发工具(SSIS, SSRS, SSAS)

  • Win2003系统下SQL Server 2008安装图解教程（详细图解）

    Win2003系统下SQL Server 2008安装图解教程（详细图解）

    最近不少用户在windows2003 server 32位操作系统上安装SQL Server2008总是失败,出现大量错误.今天经过通过我反复测试安装,找出了一个便捷的安装方法,节省大家宝贵时间,具体方法如下,供大家参考: 准备工作: 首先需要下载下面这个软件 1.Windows Installer 4.5 Redistributable - 简体中文 下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id=8483 下载时选择:

  • SQL Server 2005安装配置方法图文教程 完美兼容Win7所有版本

    SQL Server 2005安装配置方法图文教程 完美兼容Win7所有版本

    印象中,以前电脑不发达,自身编程经历不多的时候,由于Microsoft SQL Server版本众多,在不同版本的windows下必须要求装相应版本的SQL Server,否则有可能出现兼容性的问题,装个Microsoft SQL Server总是非常费劲,装完之后用起来,由于Microsoft SQL Server还需要比较多的运行资源,玩起来卡得不要不要的,最后Microsoft SQL Server给我留下了很难用很难消化的形象. 不过现在看来,Microsoft SQL Server的S

  • SQL Server 2012 安装与启动图文教程

    SQL Server 2012 安装与启动图文教程

    本文给大家介绍sql server2012安装与启动图文教程,非常详细. sqlserver2012安装步骤如下所示: SQL Server 2012 安装过程很漫长, 里面很多界面不一一截取了,我分别在win7 企业版 64位 和 win10专业版SP1 64位 装了SQL Server 2012 ,都没有问题. 1. 安装的功能选择,选择"全部" 2. 数据库引擎设置,选择"混合模式",给系统管理员sa设定登录密码. 如果你在安装的时候选择的是windows登录

  • Linux server配置安装Java与Tomcat服务器教程详解

    系统:Ubuntu 16.04 dev_desktop 1.Java安装并配置环境变量 (1)从Java官方网站下载最新版JDK: http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载jdk压缩包 jdk-8u144-linux-x64.tar.gz (2)  将压缩包解压并复制到/usr/lib 目录下 tar -zxvf jdk-8u144-linux-x64.tar.gz sudo cp -r ./jdk

  • win2008 R2 WEB环境配置之Mssql Server 2008 R2 安装图文教程及远程连接设置方法

    win2008 R2 WEB环境配置之Mssql Server 2008 R2 安装图文教程及远程连接设置方法

    Microsoft® SQL Server™ 是用于电子商务.业务线和数据仓库解决方案的数据库管理和分析系统.是微软旗下的商业数据库软件.目前最新的版本已经发展到SQL Server 2014了,微软更是推出了Windows Azure SQL云数据库. 本篇的教程的目的就是带领大家安装一下Sql server 2008 R2,对每一步作一个大概的说明,说得不好的地方,请大家指出来,大家共同进步. 这台服务器是天翼云的1元主机,买来就是给大家做教程用的.如果大家觉得好,请多多关注本博客. 安装步

随机推荐