webpack自动打包onchange遇到的坑

Posted 2020-12-26 一路の向北

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack自动打包onchange遇到的坑相关的知识，希望对你有一定的参考价值。

在使用webpack打包的时候，我们不会在每次修改后都进行手动打包，这样会比较麻烦，所以有了一个自动打包的工具

监听指定的目录，在源文件有更改的时候，自动打包生成文件

安装

npm install onchange

使用

onchange ‘app/**/*.js‘ ‘test/**/*.js‘ -- npm test

项目实例

package.json文件

{
  "name": "xxx,
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "webpack": "webpack --config ./src/webpack.config.js",
    "watch": "onchange "src/**/*.js" "src/**/*.less" -- npm run webpack" 
  },

"dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0"
  },
  "devDependencies": {
   "onchange": "^3.3.0",
    "webpack": "^3.0.0"
  }
}

需要特别注意的是，在windows环境下，不支持

 "watch": "onchange ‘src/**/*.js‘ ‘src/**/*.less‘ -- npm run webpack"

这种双引号包裹单引号的写法，需要如上代码用反斜杠进行转义，否则会自动打包失败

有了onchange的情况下，开一个终端，运行npm run watch即可监控代码的变化