英文:
Webpack watch true only works on package.json, not on all files
问题
我在webpack配置文件webpack.config.js中使用watch: true
来监视所有文件。
我通过package.json中的以下代码运行webpack:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
现在,当我运行npm run build
时,它只在我保存package.json文件时编译。如何更改它,以便在我保存所有文件夹中的任何文件时都进行编译?
完整的代码如下:
package.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"
}
}
webpack.config.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/]),
],
})
希望这对你有所帮助。
英文:
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:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
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
{
"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"
}
}
webpack.config.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/]),
],
})
答案1
得分: 1
要修复这个问题,在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 // 添加这一行
}),
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
],
英文:
To fix this, add cache: false
in the HTMLWebpackPlugin object argument in webpack.config.js:
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/]),
],
答案2
得分: 0
Use the command in your package.json
webpack --watch --config webpack.config.js
英文:
Use the command in your package.json
webpack --watch --config webpack.config.js
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论