EDIT: okay, i fixed the problem with my styles by correcting my server file. I had forgotten to update the static resources path. however, I am still having a problem. My javascript is still not firing correctly.
我在配置文件中为生产和开发环境定义了输出规则......但显然我在某处犯了错误
okay, before I post this I just want to say that I'm struggling pretty hard with webpack. I'm about 6 to 8 months into my training as a front end developer, so I'm already bursting at the seams with new languages and technologies, and this recent journey through the world of build tools may have been more than I can bear.
我想问一些问题，如有愚昧请见谅。
我很难理解为什么目前我的生产和开发版本的行为不一样。当我运行我的开发版本时，我的所有样式和 js 都可以正常工作，但是当我运行我的生产版本时，我的样式或 js 都不起作用。 dist 文件夹中填充了所有预期的捆绑文件（我所有的缩小版 css 和 js 都在那里），生成的 index.html 中的所有路径似乎都指向 dist 文件夹中的正确位置......我在下面发布了 github 存储库的链接。
寻找任何提示或线索。请随时询问更多信息，我真的不知道从哪里开始寻找（我还没有检查过）原因。在我看来，我在网上使用的有关 webpack 的课程材料非常差......
https://github.com/Funkh0user/nlp-project https://github.com/Funkh0user/nlp-project
Webpack 并不容易我承认你必须学习很多东西才能解决很多问题:)
下面是 webpack 的更优化版本。我建议使用webpack-merge插件，或者，正如我将在小型应用程序中描述的，开发和生产版本的一个文件，那么您将绕过与必须记住完成开发和生产版本这一事实相关的错误。
创建一个而不是两个 dev/prod 文件webpack.config.js
首先需要修改一下包.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/server/index.js",
"build-prod": "webpack --config webpack.config.js --mode production",
"build-dev": "webpack-dev-server --config webpack.config.js --mode development --open"
},现在最重要的部分webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
function prodPlugin(plugin, mode) {
return mode ? plugin : () => {};
}
module.exports = (env, {
mode
}) => {
const inDev = mode === 'development';
return {
mode: inDev ? 'development' : 'production',
devtool: inDev ? 'source-map' : 'none',
entry: "./src/client/index.js",
output: {
libraryTarget: 'var',
library: 'Client'
},
optimization: inDev ? {} : {
minimizer: [
new TerserPlugin({}),
new OptimizeCssAssetsPlugin({})
]
},
module: {
rules: [{
test: '/.js$/',
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
inDev ? 'style-loader' : MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/client/views/index.html",
}),
prodPlugin(
new CleanWebpackPlugin({
// Simulate the removal of files
dry: true,
// Write Logs to Console
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
protectWebpackAssets: false
}),
mode
),
new MiniCssExtractPlugin({
filename: "[name].css"
}),
prodPlugin(
new WorkboxPlugin.GenerateSW(),
mode
)
]
}
}如果你使用 vscode 我推荐使用这个plugin https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer打开生成的版本。