Webpack 的 watch 选项只在 package.json 上有效，而不在所有文件上有效。

huangapple
go评论79阅读模式
英文:

Webpack watch true only works on package.json, not on all files

问题

我在webpack配置文件webpack.config.js中使用watch: true来监视所有文件。

我通过package.json中的以下代码运行webpack：

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

现在，当我运行npm run build时，它只在我保存package.json文件时编译。如何更改它，以便在我保存所有文件夹中的任何文件时都进行编译？

完整的代码如下：

package.json

  1. {
  2.   "name": "testproj",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "code.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "build": "webpack"
  9.   },
  10.   "author": "Figma",
  11.   "license": "MIT",
  12.   "devDependencies": {
  13.     "@figma/plugin-typings": "*",
  14.     "@types/node": "^16.7.1",
  15.     "css-loader": "^6.2.0",
  16.     "html-webpack-inline-source-plugin": "0.0.10",
  17.     "html-webpack-plugin": "^5.3.2",
  18.     "style-loader": "^3.2.1",
  19.     "ts-loader": "^9.2.5",
  20.     "typescript": "^4.3.5",
  21.     "url-loader": "^4.1.1",
  22.     "webpack": "^5.51.1",
  23.     "webpack-cli": "^4.8.0"
  24.   },
  25.   "dependencies": {
  26.     "@types/react": "^17.0.19",
  27.     "@types/react-dom": "^17.0.9",
  28.     "figma-plugin-ds": "^1.0.1",
  29.     "react": "^17.0.2",
  30.     "react-dev-utils": "^11.0.4",
  31.     "react-dom": "^17.0.2"
  32.   }
  33. }

webpack.config.js

  1. const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const path = require('path')
  5. const webpack = require('webpack')
  7. module.exports = (env, argv) => ({
  8.   watch: true,
  9.   watchOptions: {
  10.     ignored: /node_modules/,
  11.   },
  13.   mode: argv.mode === 'production' ? 'production' : 'development',
  15.   devtool: argv.mode === 'production' ? false : 'inline-source-map',
  17.   entry: {
  18.     ui: './src/ui.tsx',
  19.     code: './src/code.ts',
  20.   },
  22.   module: {
  23.     rules: [
  24.       { 
  25.         test: /\.tsx?/, 
  26.         use: 'ts-loader', 
  27.         exclude: /node_modules/
  28.       },
  30.       { 
  31.         test: /\.css/, 
  32.         use: ["style-loader", "css-loader"],
  33.       },
  34.       { 
  35.         test: /\.svg/,
  36.         type: 'asset/inline',
  37.       }
  38.     ]
  39.   },
  41.   resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
  43.   output: {
  44.     filename: '[name].js',
  45.     path: path.resolve(__dirname, 'dist'), 
  46.   },
  48.   plugins: [
  49.     new webpack.DefinePlugin({
  50.       'global': {}
  51.     }),
  52.     new HtmlWebpackPlugin({
  53.       inject: "body",
  54.       template: './src/ui.html',
  55.       filename: 'ui.html',
  56.       chunks: ['ui']
  57.     }),
  58.     new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  59.   ],
  60. })

希望这对你有所帮助。

英文:

I have my webpack watch all my files using watch: true in webpack.config.js.

I run webpack using npm run build through this code in package.json:

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

Now when I use npm run build, it only compiles every time I save package.json. How do I change it so that it compiles every time I save a file in all of my folders?

Full code

package.json

  1. {
  2. "name": "testproj",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "code.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1",
  8. "build": "webpack"
  9. },
  10. "author": "Figma",
  11. "license": "MIT",
  12. "devDependencies": {
  13. "@figma/plugin-typings": "*",
  14. "@types/node": "^16.7.1",
  15. "css-loader": "^6.2.0",
  16. "html-webpack-inline-source-plugin": "0.0.10",
  17. "html-webpack-plugin": "^5.3.2",
  18. "style-loader": "^3.2.1",
  19. "ts-loader": "^9.2.5",
  20. "typescript": "^4.3.5",
  21. "url-loader": "^4.1.1",
  22. "webpack": "^5.51.1",
  23. "webpack-cli": "^4.8.0"
  24. },
  25. "dependencies": {
  26. "@types/react": "^17.0.19",
  27. "@types/react-dom": "^17.0.9",
  28. "figma-plugin-ds": "^1.0.1",
  29. "react": "^17.0.2",
  30. "react-dev-utils": "^11.0.4",
  31. "react-dom": "^17.0.2"
  32. }
  33. }

webpack.config.js

  1. const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. const path = require('path')
  4. const webpack = require('webpack')
  5. module.exports = (env, argv) => ({
  6. watch: true,
  7. watchOptions: {
  8. ignored: /node_modules/,
  9. },
  10. mode: argv.mode === 'production' ? 'production' : 'development',
  11. devtool: argv.mode === 'production' ? false : 'inline-source-map',
  12. entry: {
  13. ui: './src/ui.tsx',
  14. code: './src/code.ts',
  15. },
  16. module: {
  17. rules: [
  18. { 
  19. test: /\.tsx?$/, 
  20. use: 'ts-loader', 
  21. exclude: /node_modules/
  22. },
  23. { 
  24. test: /\.css$/, 
  25. use: ["style-loader", "css-loader"],
  26. },
  27. { 
  28. test: /\.svg/,
  29. type: 'asset/inline'
  30. }
  31. ]
  32. },
  33. resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
  34. output: {
  35. filename: '[name].js',
  36. path: path.resolve(__dirname, 'dist'), 
  37. },
  38. plugins: [
  39. new webpack.DefinePlugin({
  40. 'global': {}
  41. }),
  42. new HtmlWebpackPlugin({
  43. inject: "body",
  44. template: './src/ui.html',
  45. filename: 'ui.html',
  46. chunks: ['ui']
  47. }),
  48. new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  49. ],
  50. })

答案1

得分: 1

要修复这个问题，在webpack.config.js文件中的HTMLWebpackPlugin对象参数中添加cache: false：

  1.   plugins: [
  2.     new webpack.DefinePlugin({
  3.       'global': {}
  4.     }),
  5.     new HtmlWebpackPlugin({
  6.       inject: "body",
  7.       template: './src/ui.html',
  8.       filename: 'ui.html',
  9.       chunks: ['ui'],
  10.       cache: false // 添加这一行
  11.     }),
  12.     new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  13.   ],
英文:

To fix this, add cache: false in the HTMLWebpackPlugin object argument in webpack.config.js:

  1.   plugins: [
  2. new webpack.DefinePlugin({
  3. 'global': {}
  4. }),
  5. new HtmlWebpackPlugin({
  6. inject: "body",
  7. template: './src/ui.html',
  8. filename: 'ui.html',
  9. chunks: ['ui'],
  10. cache: false // Add this line
  11. }),
  12. new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  13. ],

答案2

得分: 0

Use the command in your package.json

  1. webpack --watch --config webpack.config.js
英文:

Use the command in your package.json

  1. webpack --watch --config webpack.config.js

huangapple
  • 本文由 发表于 2023年2月10日 15:49:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/75408240.html
  • javascript
  • webpack
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定