首页 > 解决方案 > Webpack 监视检测更改但不构建捆绑包

问题描述

每次进行更改时,我都想重建我的捆绑包。在 package.json 我声明了以下 webpack 版本:

"webpack": "^4.38.0",
"webpack-cli": "^3.3.6"

我使用以下命令(用于参数)使用 npm 启动 webpack

(也许这对路径很重要:我使用的是 Windows 7)

"buildDev": "webpack -d --env.widgetsrc=devServer --config webpack.config.js --progress --colors"

它将第一次在适当的文件夹中构建 JavaScript 文件。当 watch 任务开始检测更改时,它将向我显示以下信息:

哈希:...版本:webpack 4.38.0 时间:构建时间:...资产:MyJsFile.js [./MyJsFile.js] 7 KiB {main} [构建]

但是 MyJsFile 至少不在我期望的目录中构建。

webpack.config.js 看起来像这样:

const path = require("path");
const webpack = require("webpack");
const appDir = path.resolve(__dirname, "");
const reponame = require("./package.json").name;
const devServer = require("../../../icec-lab-conf.json").server;
const customPath = "/xcc/rest/public/custom/";
var publicPath;
var buildDir;

if (process.env.NODE_ENV === 'production') {
  publicPath = customPath;
  buildDir = path.resolve(__dirname, "./dist/");
} else {
  publicPath = devServer;
  buildDir = path.resolve(__dirname, "../../../build/public/");
}

var mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';

var js_entry = `${appDir}\\${reponame}.js`;
var js_filename = mode === "production" ? `${reponame}-min.js` : `${reponame}.js`;

const config = {
  entry: js_entry,
  output: {
    filename: js_filename,
    path: buildDir,
    publicPath: publicPath
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: appDir,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [],
  watch: true,
  watchOptions: {
    poll: true,
    ignored: ['node_modules']
  },
  mode: mode
};

module.exports = config;

任何提示我做错了什么?

标签: webpack

解决方案


构建正在运行。当我添加一些代码并将其与添加的捆绑包进行比较时。从监视模式构建时,webpack-banner 插件似乎没有调整时间。

我的错误是传递字符串而不是函数。

当使用带有 new Date() 的函数时,它总是会计算日期,就像我想要的那样。

  plugins: [
    new webpack.BannerPlugin({
      banner: (config) => {
        return `/*!,
        ${description}
        Build: ${new Date()} - ${version},
        Licensed under the ${license} License,
        Author: ${author}
        */`
      },
      raw: true,
      entryOnly: false
    })
  ],

推荐阅读