zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    springboot+fegin实现负载均衡
    springcloud实现微服务服务注册、负载均衡
    spring boot服务状态监控+shell远程连接服务
    微服务基础概念及相关技术组件
    集群分布式基础概念及了解
    http第一章-telnet测试
    spring整合netty

    springMVC+spring+JPA配置文件
    CAN信号值解析
  • 原文地址:https://www.cnblogs.com/songsongblue/p/11874700.html
Copyright © 2011-2022 走看看