• 4.使用webpack-dev-server工具实现自动打包编译的功能


    使用webpack-dev-server这个工具,来实现自动打包编译的功能

    1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
    或者运行 cnpm i webpack-dev-server -D 安装
    2.安装完毕后,这个工具的用法,和webpack命令的用法,完全一样
    打包运行命令:webpack-dev-server,会报错
    3.由于,我们是在项目中,本地安装的 webpack-dev-server,所以,无法把它当作脚本命令,在powershell终端中直接运行;(只有那些安装到全局 -g的工具,才能在终端中正常执行)。但是,webpack-dev-server只能本地安装
    在package.json 的scripts节点中配置要运行的命令

    "scripts":{
       "dev":"webpack-dev-server"
    }
    

    这时,控制台执行

    npm run dev
    

    相当于执行

    webpack-dev-server
    

    如果安装包的过程出错,可以删除node_modules,再重新安装
    执行以下命令装包

    cnpm i
    

    4.注意:webpack-dev-server这个工具,如果想要正常运行,要求,在本地项目中,必须安装webpack

    peerDependencies WARNING webpack-dev-server@^3.9.0 requires a peer of webpack@^4.0.0 but none was installed

    cnpm i webpack -D
    

    5.webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘上,而是,直接托管到了电脑的内存中,
    所以,我们在项目根目录中,根本找不到这个打包好的bundle.js;
    6.我们可以认为,webpack-dev-server把打包好的文件,以一种虚拟的形式,托管到了咱们项目的根目录中,虽然我们看不到它,
    但是,可以认为,和dist、src、node_modules 平级,有一个看不见的文件,叫做bundle.js

  • 相关阅读:
    获取请求IP
    Excel导入工具类兼容xls和xlsx
    Openshift 4.3环境的离线Operatorhub安装
    RHEL学习
    OpenShift Service Mesh 培训作业
    OpenId Connect认证配置
    Route Sharding in OpenShift 4.3
    OpenShift 4.3环境中创建基于Go的Operator
    Quay和Clair的集成
    Quay 基础版安装和部署
  • 原文地址:https://www.cnblogs.com/songsongblue/p/11874700.html
Copyright © 2020-2023  润新知