首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

监视文件更改上的webpack自定义命令

Webpack 提供了一个名为 watch 的模式,可以监视文件更改并重新编译。你可以在你的 package.json 文件中的 scripts 部分添加一个自定义命令来启动这个模式。例如:

代码语言:javascript
复制
"scripts": {
  "watch": "webpack --watch"
}

然后,你可以通过运行 npm run watch 命令来启动 watch 模式。

如果你想要更多的自定义选项,你可以在你的 webpack.config.js 文件中配置 watch 选项。例如:

代码语言:javascript
复制
module.exports = {
  //...
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000
  }
};

在这个配置中:

  • watch: true 启用了 watch 模式。
  • watchOptions 对象包含了一些自定义的 watch 选项。
  • ignored 选项指定了哪些文件或目录不应被监视。在这个例子中,node_modules 目录被忽略了。
  • aggregateTimeout 选项指定了在重新构建之前等待的时间(以毫秒为单位)。这对于防止在保存多个文件时进行多次重新构建很有用。
  • poll 选项指定了检查文件更改的频率(以毫秒为单位)。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

webpack-cli和它自定义命令

今天我要给大家带来webpack-cli原理浅析和它自定义命令行工具 事情是这样,最近在看webpack相关教程,然后发现教程中讲webpack-cli中使用yargs模块解析命令出于好奇,我就当场拉了...在webpack-cli 3 中,在bin/cli.js文件中解析cli参数,通过bin/utils/convert-argv.js文件,将得到命令行参数转换为webpack 配置选项对象。...webpack-cli 原理 其实webpack-cli就是将cli参数和webpack配置文件配置整合得到完整配置对象。 通过解析命令行模块解析命令行参数。...将命令行参数转换为webpack配置选对象: webpack-cli内部存在参数默认值,会去判断命令行是否指定具体路径配置文件,如果指定配置文件就会去执行配置文件,否则就会根据默认参数和cli参数整合到一起...注意: 既然使用dy自定义命令,就需要知道,dy已经被注册到本地模块中。dy默认就是执行当前目录下dy.js文件。想要跟换执行文件,只在package.json中更改dy对应文件路径是行不通

94820
  • TypeScript 工程化实践方案

    编译选项 --watch 使编译器在监视模式下运行,会监视输出文件,在它们改变时重新编译。这样好处就是我们以后不用再手动编译main.ts这个文件了。...但是,这还有一个问题就来了,如果我还有一个ts文件,比如我再创建一个index.ts。我们也想要监视这个文件改变,就得再开一个命令行运行监听命令。...如果要监视多个文件,那这种方式其实也不够优雅,不适合我们日常开发。我们想要只运行一个命令就可以把目录下所有的ts文件全部编译成js文件。...然后,我们运行如下命令就可以监视所有ts文件了: tsc --watch 或 tsc -w OK,到这里,我终于引出了tsconfig.json这个文件。...我们先创建一个目录 study ,然后运行如下命令生成package.json文件: npm init -y 运行完命令后会在当前命令下生成package.json文件 然后运行如下命令安装webpack

    87330

    webpack

    打包image/styles/assets/scrips/等前端常用文件 4 搭建开发环境开启服务器 5 监视文件改动,热部署。...6 将单文件组件(*.vue)类型文件,转化成浏览器识别的内容 基本使用 webpack两种使用方式:1命令行 2 配置文件 webpack.config.js package 创建webpacktest.../src/main.js --mode development" }, 在终端中执行执行命令 npm run build webpack打包处理过程: 1 运行webpack打包命令 2 webpack..." }, 终端执行编译npm run build webpack-dev-server 1开启服务器 2 自动监视文件变化 热部署 安装 npm i -D webpack-dev-server...加载器loader webpack自身处理普通JS文件,而对于非JS文件,都需要对应loader来进行特殊处理,也就是每种类型文件,都需要需要专门loader来处理。

    1.4K30

    Vue 基础总结(2.X)

    : "dev": "webpack-dev-server --mode development" 执行命令: yarn dev 四、打包处理 ES6/CSS/图片 处理 ES6 a....this.bus. slot 父组件向子组件通信 通信是带数据标签 注意: ==标签是在父组件中解析== vuex 多组件共享状态(数据管理) 组件间关系也没有限制 功能比事件总线强大, 适用于...是否是 obj 自身属性 三、数据代理(MVVM.js) 通过一个对象代理对另一个对象中属性操作(读/写) 通过 vm 对象来代理 data 对象中所有属性操作 好处: 方便操作 data...@2.x` 相同 vue init webpack my-project 四、比较 V2 与 V3 创建项目 v2 配置是直接可见, v3 是包装隐藏起来了 修改配置: v2 是直接在配置文件中修改..., v3 提供了一个专门配置: vue.config.js, 我们可以根据文档在此文件中添加配置 vue 使用是不带编译器版本, 打包文件更小 不写 template 配置, 直接 render

    5.3K20

    2-1 webpack究竟是什么

    这里js我们采用pop写法。如果内容越来越多,内容越来越多,难以管理与维护。我们先采用oop写法来修改上文件。 2. 使用oop改造 使用oop改造代码如下: <!...,维护方便。...使用打包工具webpack 我们先来分析一下这三个问题,文件太大了,我们想拆成多个文件,这是出于编写者需要,明确各个文件之间依赖关系也是出于编写者需要,而保证加载顺序是运行时需要。...3. npx webpack index.js 我们发现在根目录下生成了一个文件夹dist,下面有一个main.js文件,这就是webpack根据模块间依赖关系打包生成文件。我们引入这个文件。...通过webpack,使用esmodule,解决oop三个问题 拆成多个文件导致加载资源更多 -> 只用引入一个文件 从代码中看不出文件依赖关系 -> 在引入文件中指定依赖关系 不能保证加载顺序,会产生依赖错误

    68900

    Vue2(二)侦听器和计算属性

    vue-cli脚手架使用 一、watch侦听器 1、介绍: watch 侦听器允许开发者监视数据变化,从而针对数据变化做特定操作 当我们给某个数据对象加上侦听器后,一旦该对象值发送改变,就会触发我们在监听器上自定义函数...它简化了程序员基于 webpack 创建工程化 Vue 项目的过程 使得程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置问题。...vue-cli 快速生成工程化 Vue 项目的命令: vue create 项目的名称 (3)然后选择自己项目所需要用到包,vue-cli会自动帮你安装到项目中 ? ​...(运行npm run build后,webpack会将项目中.vue组件打包,并在项目根目录生成dist文件夹,其中index.html文件内容就是App.vue渲染上去) 其中: assets...文件夹:存放项目中用到静态资源文件,例如:css 样式表、图片资源 components 文件夹:程序员封装、可复用组件,都要放到 components 目录下 main.js 是项目的入口文件

    57210

    webpack5 实战四》之loader

    新建自定义loader 文件 2. webpack config 配置别名加载 3. 内联使用 4. 执行webpack 命令验证 三、Loader 接口 四、Loader 传参 1..../hero.js"; console.log(hero); 接下来执行webpack 打包命令打包,生成dist 下文件,具体webpack 配置见源码。...将打包后文件引入index.html ,并在浏览器打开。 结果德玛西亚已经替换成了详细介绍成功了。 二、loader内联方式 目标 通过内联方式使用loader 别名载入loader 1....执行webpack 命令验证 打包之后文件: /***/ "./src/hero.js": /*!*********************!*\ !*** ....config 配置 这里针对于单个文件使用其实使用内联方式简单,但是这里为了联系所以采用rule 方式配置,保留之前loader。

    73820

    十分钟搞定 TypeScript + webpack 配置

    通过 webpack plugin copy-webpack-plugin 复制 html/ 中文件。...): npm run wpw 从现在开始,webpack监视存储库中文件是否有更改,并在检测到任何修改时重新构建该 Web 应用。...在另一个命令行中,我们现在可以启动一个在本地主机上提供 build/ 内容 Web 服务器: npm run serve 如果转到 Web 服务器输出 URL,则可以看到正在运行 Web 应用程序...wp:运行 webpack 一次编译所有内容。 wpw:用 webpack 监视,并仅编译修改过文件。 serve:运行服务器 http-server 并提供目录 build/ 内容。...依赖项: Webpack incl 支持通过 CLI(命令行界面)和插件使用:webpackwebpack-cli、ts-loader、copy-webpack-plugin 需要 ts-loader

    2.9K22

    使用Angular CLI进行Build (构建) 和 Serve

    webpack运行时. main.bundle.js 就是程序代码. pollyfills.bundle.js 就是浏览器Pollyfills. styles.bundle.js 样式 vendor.bundle.js...首先修改上一个例子中代码: ? 执行ng build: ? ? 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: ? 可以看到它引用了生成5个js文件....这是因为, 这时候webpack是在内存中进行serve....通过文件大小可以看出确实是prod build. ng eject. 为项目生成webpack配置和脚本. 执行该命令试试: ? 看看有哪些变化: .angular-cli.json: ?...命令脚本都变了 ? 还多出来一个webpack.config.js文件: ? 为什么要这么做呢? 可以对项目更深入配置.... 这时运行程序就是 npm start了.

    2.3K70

    Webpack实战-构建离线应用

    Webpack 构建接入 Service Workers 离线应用要解决关键问题在于如何生成上面提到 sw.js 文件, 并且sw.js文件 cacheFileList 变量,代表需要被缓存文件...{ // 自定义 sw.js 文件所在路径 // ServiceWorkerWebpackPlugin 会把文件列表注入到生成 sw.js 中 entry: path.join...serviceworker-webpack-plugin 插件为了保证灵活性,允许使用者自定义 sw.js,构建输出 sw.js 文件中会在头部注入一个变量 serviceWorkerOption.assets...需要修改上面的 sw.js 文件中写成了静态值 cacheFileList 为如下: // 需要被缓存文件 URL 列表 var cacheFileList = global.serviceWorkerOption.assets...webpack-dev-server 命令后,DevServer 将以 HTTPS 模式启动,并输出如下日志: > webpack-dev-server Project is running at

    74920

    Webpack 项目打包压缩优化

    false poolRespawn: false, // 闲置时定时删除 worker 进程 // 默认为 500(ms) // 可以设置为无穷大,这样在监视模式...// 降低这个数值会降低总体效率,但是会提升工作分布均一 poolParallelJobs: 50, // 池名称 // 可以修改名称来创建其余选项都一样池...是分包配置文件地址 } 运行时需要安装webpack-cli 如果没有安装,会提示安装 npm run build-dll 运行成功后,dll文件夹下会生成 对应 common-manifest.json...和conmon.dll.js文件 生产分包需要需要在webpack中将分包排除出去 在项目打包webpack配置文件中 plugins:[ new webpack.DllReferencePlugin...模块热更新 clean-webpack-plugin 目录清理 html-webpack-plugin 自动生成一个index.html文件,将打包js文件自动通过标签引用 uglifyjs-webpack-plugin

    51451

    详解 Vue 目录及配置文件之 build 目录

    // 此文件webpack 基本项目配置文件 'use strict' // 版本检查 node 版本号 版本有要求 "engines": {"node": ">= 4.0.0","npm":...= 'production' // ora 是一个命令行转圈圈动画插件,好看用 const ora = require('ora') // rimraf 插件是用来执行 UNIX 命令 rm 和...// chalk 插件,用来在命令行中显示彩色文字 const chalk = require('chalk') // 引入 webpack 模块使用内置插件和 webpack 方法 const webpack...,友好展示错误日志插件 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // 自动打开可用端口包 const...webpack 错误或警告在控制台不可见 quiet: true, // necessary for FriendlyErrorsPlugin // 监视文件选项 watchOptions

    2.4K20

    一小时内搭建一个全栈Web应用框架

    向package.json文件中添加一些运行命令会是你开发过程更加顺畅。...我总是在自己package.json 文件中添加一些build, dev-build 和 watch 命令。...build用于构建生产环境版本, dev-build用于开发时构建版本,watch作用和dev-build类似,只不过可以自动监视项目文件是否修改,并且自动重新构建被修改部分,你只需要刷新浏览器就可以看到改动后结果...; 启动一个独立终端窗口来运行前面创建 Webpack watch 命令,这样当我们在工作时,它可以在后台一直运行。它会在没有编码错误前提下自动构建你包。...如果你想在自己环境中拥有很大灵活性和能够自定义配置特性,Pyramid是一个不错选择。

    94740
    领券