Webpack watch true仅适用于package.json,而不是所有文件

z4iuyo4d  于 2023-02-12  发布在  Webpack
关注(0)|答案(2)|浏览(146)

我有我的webpack观看我所有的文件使用watch: true在 * webpack.config.js *。
我使用npm run build通过 package.json 中的以下代码运行webpack:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

现在当我使用npm run build时,它只在我每次保存 package.json 时编译。我如何更改它,使它在我每次保存所有文件夹中的文件时编译?

完整代码

  • 包.json*
{
  "name": "testproj",
  "version": "1.0.0",
  "description": "",
  "main": "code.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "Figma",
  "license": "MIT",
  "devDependencies": {
    "@figma/plugin-typings": "*",
    "@types/node": "^16.7.1",
    "css-loader": "^6.2.0",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.2.1",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "url-loader": "^4.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "@types/react": "^17.0.19",
    "@types/react-dom": "^17.0.9",
    "figma-plugin-ds": "^1.0.1",
    "react": "^17.0.2",
    "react-dev-utils": "^11.0.4",
    "react-dom": "^17.0.2"
  }
}
  • 网络包配置js*
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
const webpack = require('webpack')

module.exports = (env, argv) => ({
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
  },

  mode: argv.mode === 'production' ? 'production' : 'development',

  devtool: argv.mode === 'production' ? false : 'inline-source-map',

  entry: {
    ui: './src/ui.tsx',
    code: './src/code.ts',
  },

  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        use: 'ts-loader', 
        exclude: /node_modules/
      },

      { 
        test: /\.css$/, 
        use: ["style-loader", "css-loader"],
      },
      { 
        test: /\.svg/,
        type: 'asset/inline'
      }
    ]
  },

  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), 
  },

  plugins: [
    new webpack.DefinePlugin({
      'global': {}
    }),
    new HtmlWebpackPlugin({
      inject: "body",
      template: './src/ui.html',
      filename: 'ui.html',
      chunks: ['ui']
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  ],
})
axr492tv

axr492tv1#

使用package.json中的命令

webpack --watch --config webpack.config.js
svdrlsy4

svdrlsy42#

要解决此问题,请在 webpack.config.js 的HTMLWebpackPlugin对象参数中添加cache: false

plugins: [
    new webpack.DefinePlugin({
      'global': {}
    }),
    new HtmlWebpackPlugin({
      inject: "body",
      template: './src/ui.html',
      filename: 'ui.html',
      chunks: ['ui'],
      cache: false // Add this line
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  ],

相关问题