初始生产版本创建捆绑软件代码,但所有后续构建都重复使用旧捆绑软件
在向我的项目添加了带有通行证和redux的身份验证之后,每当我将生产就绪代码推送到服务器时,它都会重复使用旧版本的捆绑文件。如果我使用的是一台服务器,但该服务器具有较旧的项目版本,则它将创建一个新的捆绑包,但后续的推送都不会。
起初我以为可能根本没有运行webpack,所以我在启动脚本中添加了一个特定的调用,并将依赖项从devDependencies移开了。即使从服务器上可以看到Web Pack正在运行和构建,这最终也没有任何改变。以下是我在package.json和webpack.config中设置的脚本。
// Package.json
"scripts": {
"start": "npm-run-all --parallel build:prod lift",
"dev": "webpack --mode development && sails lift",
"start:debug": "npm-run-all --parallel open:client debug",
"open:client": "webpack-dev-server --mode development --open",
"build": "npm run build:prod",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production"
}
// Webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
entry: "./assets/src/index.js"
},
output: {
path: __dirname + "/.tmp/public",
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
use: "babel-loader",
test: /\.js$/,
exclude: /node_modules/
},
{
use: ["style-loader", "css-loader"],
test: /\.css$/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "assets/src/index.html"
})
]
};
我知道我尚未采用最佳实践来生产Webpack,但现在我只想使其在我的服务器上工作。我的下一步是对生产的webpack进行微调,以使我的文件包文件尽可能最小,但是现在我需要使webpack重新打包资产,而不是使用旧文件。我是前端和后端javascript开发的新手,所以很多新手对我来说都是新手,我刚开始尽可能快地设置了webpack。
回答如下:您需要在重新捆绑新的构建文件夹之前删除旧的构建文件夹。在包装前添加一个prepare npm挂钩以执行脚本
"scripts": {
"prepare": "rm -rf /.tmp/public",
"start": "npm-run-all --parallel build:prod lift",
"dev": "webpack --mode development && sails lift",
"start:debug": "npm-run-all --parallel open:client debug",
"open:client": "webpack-dev-server --mode development --open",
"build": "npm run build:prod",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production"
}
或
"scripts": {
"clean": "rm -rf /.tmp/public",
...
"build": "npm run clean && npm run build:prod",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production"
}
初始生产版本创建捆绑软件代码,但所有后续构建都重复使用旧捆绑软件
在向我的项目添加了带有通行证和redux的身份验证之后,每当我将生产就绪代码推送到服务器时,它都会重复使用旧版本的捆绑文件。如果我使用的是一台服务器,但该服务器具有较旧的项目版本,则它将创建一个新的捆绑包,但后续的推送都不会。
起初我以为可能根本没有运行webpack,所以我在启动脚本中添加了一个特定的调用,并将依赖项从devDependencies移开了。即使从服务器上可以看到Web Pack正在运行和构建,这最终也没有任何改变。以下是我在package.json和webpack.config中设置的脚本。
// Package.json
"scripts": {
"start": "npm-run-all --parallel build:prod lift",
"dev": "webpack --mode development && sails lift",
"start:debug": "npm-run-all --parallel open:client debug",
"open:client": "webpack-dev-server --mode development --open",
"build": "npm run build:prod",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production"
}
// Webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
entry: "./assets/src/index.js"
},
output: {
path: __dirname + "/.tmp/public",
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
use: "babel-loader",
test: /\.js$/,
exclude: /node_modules/
},
{
use: ["style-loader", "css-loader"],
test: /\.css$/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "assets/src/index.html"
})
]
};
我知道我尚未采用最佳实践来生产Webpack,但现在我只想使其在我的服务器上工作。我的下一步是对生产的webpack进行微调,以使我的文件包文件尽可能最小,但是现在我需要使webpack重新打包资产,而不是使用旧文件。我是前端和后端javascript开发的新手,所以很多新手对我来说都是新手,我刚开始尽可能快地设置了webpack。
回答如下:您需要在重新捆绑新的构建文件夹之前删除旧的构建文件夹。在包装前添加一个prepare npm挂钩以执行脚本
"scripts": {
"prepare": "rm -rf /.tmp/public",
"start": "npm-run-all --parallel build:prod lift",
"dev": "webpack --mode development && sails lift",
"start:debug": "npm-run-all --parallel open:client debug",
"open:client": "webpack-dev-server --mode development --open",
"build": "npm run build:prod",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production"
}
或
"scripts": {
"clean": "rm -rf /.tmp/public",
...
"build": "npm run clean && npm run build:prod",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production"
}