Reactjs 无法使用webpack将React项目的bundle.js复制到Spring项目
我在Spring项目中有一个React项目。我想要一个调试环境,在那里可以监视React文件,并将其编译和复制到Spring项目(不同的目录)。我正在使用Webpack4.8 目前我必须运行Reactjs 无法使用webpack将React项目的bundle.js复制到Spring项目,reactjs,spring,webpack-4,Reactjs,Spring,Webpack 4,我在Spring项目中有一个React项目。我想要一个调试环境,在那里可以监视React文件,并将其编译和复制到Spring项目(不同的目录)。我正在使用Webpack4.8 目前我必须运行npm run build:dev每次我对React代码进行更改时,都会创建正确的bundle.js,并将其移动到正确的位置。但每次运行它都很麻烦。 我尝试在脚本中添加--watch,尽管它确实创建了一个新的构建,但它并没有复制到最终位置 mypackage.json脚本 "scripts": { "
npm run build:dev
每次我对React代码进行更改时,都会创建正确的bundle.js
,并将其移动到正确的位置。但每次运行它都很麻烦。
我尝试在脚本中添加--watch
,尽管它确实创建了一个新的构建,但它并没有复制到最终位置
mypackage.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
获得正确的构建,但是它没有被复制到指定的位置。好的,所以我使用了一个名为的库。
更新后的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
时,我会将更新后的bundle.js复制到所需的位置,webpack还会监视我的React文件