Node.js webpack-dev-server配置命令的两种方式

第一种直接在package.json文件中的"scripts"里添加：

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

open：每次运行项目自动打开浏览器
port：指定项目运行占用的端口号
contentBase ：项目启动首次访问的目录
hot：iframe 热替换模式，减少大量代码重复更新

第二种在 webpack.config.js 文件中进行配置：

const path = require('path')// 启用热更新的 第2步
const webpack = require('webpack'); // 加载 webpack 模块module.exports = {entry: path.join(__dirname, './src/main.js'),// 入口output: { // 输出文件相关的配置path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去filename: 'bundle.js' // 指定 输出的文件的名称},devServer: {  // 配置 dev-server 命令参数的第二种形式// --open --port 3000 -contentBase src -hotopen: true,   // 自动打开浏览器port: 3000,   //  设置启动时候的运行端口contentBase: 'src',  // 指定托管的根目录hot: true   // 启动热个新的 第1步},plugins: [new webpack.HotModuleReplacementPlugin() // new 一个热更新的模块对象，这是启用热更新的第三步]
}

package.json文件中的"scripts"里添加

 "dev": "webpack-dev-server"

使用 npm run dev 运行项目

如果缺少相应模块可根据 https://blog.csdn.net/qq_44989881/article/details/107714969 进行配置

Node.js webpack-dev-server配置命令的两种方式相关推荐

node.js 获取异步方法里面的数据 =》两种方式
第一种: 通过回调函数实现: var fs = require('fs); function getmime(callback){ fs.readFile('./t1.js', function(er ...
[js] axios为什么可以使用对象和函数两种方式调用？是如何实现的？
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码初始化看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
SQL SERVER 2000 数据库备份和SQL Server数据库备份有两种方式，
SQL SERVER 2000 数据库备份与还原时间:2006-08-30 10:23:23 来源:CSDN 作者:佚名备份数据库,例如: BACKUP DATABASE Northwind ...
SpringBoot配置绑定的两种方式
SpringBoot配置绑定的两种方式演示文件 bean public class Student {private String name;private Integer age;public S ...
spring配置属性的两种方式
spring配置属性有两种方式,第一种方式通过context命名空间中的property-placeholder标签 <context:property-placeholder location ...
在思科三层交换机配置网关的两种方式
随着交换技术的发展,三层交换机在网络汇聚层与核心层的应用越来越多.在内网中子网与子网之间的通讯越来越少依赖于路由(几乎见不到了),而是使用带有路由功能的三层交换机,这对于内网中子网之间的通信效率的提高 ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
web.config中配置数据库连接的两种方式
在网站开发中,数据库操作是经常要用到的操作,ASP.NET中一般做法是在web.config中配置数据库连接代码,然后在程序中调用数据库连接代码,这样做的好处就是当数据库连接代码需要改变的时候,我们只 ...
Vue学习记录8，vue脚手架配置代理的两种方式，Github搜索案例，vue-resource，三种插槽，Vuex及搭建Vuex环境，getter和四个map方法的使用，模块化+命名空间
目录 vue脚手架配置代理方法一方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽默认插槽具名插槽作用域插槽 Vue ...

Node.js webpack-dev-server配置命令的两种方式

Node.js webpack-dev-server配置命令的两种方式相关推荐

最新文章

热门文章