无法使用 webpack 将 React 项目的 bundle.js 复制到 Spring 项目
Unable to copy bundle.js of a React project to Spring Project using webpack
我在 Spring 项目中有一个 React 项目。我想要一个调试环境,在其中监视 React 文件,并将其编译并复制到 Spring 项目(不同目录)。我正在使用 Webpack 4.8。
目前,我每次更改 React 代码时都必须 运行 npm run build:dev
,创建正确的 bundle.js
并将其移动到正确的位置。但是 运行 每次都设置它很麻烦。
我试过用 --watch
附加脚本,虽然它确实创建了一个新版本,但它没有被复制到最终位置。
我的package.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
获得正确的构建,但它没有被复制到指定位置。
好的,所以我使用了一个名为 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
时,我将更新的 bundle.js 复制到所需位置,webpack 也会监视我的 React 文件。
我在 Spring 项目中有一个 React 项目。我想要一个调试环境,在其中监视 React 文件,并将其编译并复制到 Spring 项目(不同目录)。我正在使用 Webpack 4.8。
目前,我每次更改 React 代码时都必须 运行 npm run build:dev
,创建正确的 bundle.js
并将其移动到正确的位置。但是 运行 每次都设置它很麻烦。
我试过用 --watch
附加脚本,虽然它确实创建了一个新版本,但它没有被复制到最终位置。
我的package.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
获得正确的构建,但它没有被复制到指定位置。
好的,所以我使用了一个名为 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
时,我将更新的 bundle.js 复制到所需位置,webpack 也会监视我的 React 文件。