无法使用 webpack 将 React 项目的捆绑.js复制到 Spring 项目

Question

我在 Spring 项目中有一个 React 项目。我想要一个调试环境，在那里监视React文件，并编译并复制到Spring项目(不同的目录(。我正在使用 Webpack 4.8。

目前，每次更改 React 代码时，我都必须运行npm run build:dev，创建正确的bundle.js并将其移动到正确的位置。但是每次运行它都很麻烦。 我尝试用--watch附加脚本，尽管它确实创建了一个新的构建，但它不会复制到最终位置。

我的包.json 脚本

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node_modules\.bin\webpack-dev-server --config .\webpack.dev.js",
"dev": "webpack --config .\webpack.dev.js",
"build": "webpack --config .\webpack.prod.js",
"copy:prod": "copy .\dist\bundle.js ..\xxx\src\main\resources\static\ /Y",
"copy:dev": "copy .\dist\bundle.js ..\xxx\build\resources\main\static\ /Y",
"build:dev": "npm run dev && npm run copy:dev",
"build:prod": "npm run build && npm run copy"
},

对于任何感兴趣的人，这是我的webpack.dev.js

const path = require("path");
const { resolve } = require("path")
const config = {
mode: "development",
entry: "./src/index.js",
stats: {
colors: true
},
devtool: "inline-source-map",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
}
]
}
};
module.exports = config;

理想情况下，我希望对 React 代码的任何更改都触发构建，并将构建复制到其他位置。目前的情况是，我能够使用--watch获得正确的构建，但它没有被复制到指定位置。

Answer 1

好的，所以我使用了一个名为copy-webpack-plugin的库。 更新后的webpack.dev.js文件现在看起来像

const path = require("path");
const { resolve } = require("path");
const CopyPlugin = require('copy-webpack-plugin');
const config = {
mode: "development",
entry: "./src/index.js",
stats: {
colors: true
},
devtool: "inline-source-map",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
}
]
},
plugins: [
new CopyPlugin([
{ from: './dist/bundle.js', to: '../../xxx/build/resources/main/static/', force: true},
{ from: './dist/bundle.js.map', to: '../../xxx/build/resources/main/static/', force: true}
], { copyUnmodified: true })
]
};
module.exports = config;

并更新了我的 npm 脚本

"dev": "webpack --config .\webpack.dev.js --watch",

现在，当我运行npm run dev时，我有更新的捆绑包.js复制到所需的位置，并且 webpack 也会监视我的 React 文件。