Webpack 生产构建样式不出现答案

【问题标题】：Webpack production build styles do not appearWebpack 生产构建样式不出现
【发布时间】：2020-01-17 08:38:58
【问题描述】：

编辑：好的，我通过更正我的服务器文件解决了我的样式问题。我忘记更新静态资源路径。但是，我仍然遇到问题。我的 javascript 仍然没有正确触发。

我在我的配置文件中为生产和开发环境定义了输出规则......但显然我在某个地方犯了一个错误

okay，在我发布这篇文章之前，我只想说我在使用 webpack 时遇到了很大的困难。作为一名前端开发人员，我已经接受了大约 6 到 8 个月的培训，所以我已经对新的语言和技术充满了热情，而最近这段构建工具世界的旅程可能超出了我的承受能力.

我要问一些问题，如果他们很愚蠢，请原谅我。

我很难理解为什么目前我的生产和开发版本的行为不一样。当我运行我的开发版本时，我所有的样式和 js 都可以正常工作，但是当我运行我的生产版本时，我的样式或 js 都不起作用。 dist 文件夹中填充了所有预期的捆绑文件（我所有的缩小 css 和 js 都在那里），并且生成的 index.html 中的所有路径似乎都指向 dist 文件夹中的正确位置.....我在下面发布了一个指向 github repo 的链接。

寻找任何提示或线索。请随时询问更多信息，我真的不知道从哪里开始寻找原因（我还没有检查过）。在我看来，我在网上使用的关于 webpack 的课程材料很差......

https://github.com/Funkh0user/nlp-project

【问题讨论】：

当您使用开发人员工具进行检查时，您在控制台和网络选项卡中看到了什么？你也可以发一下吗？
是的一秒钟....好的，编辑了我的原始帖子。抱歉我的无知，我以为我对 Web 开发了解一两件事，然后我开始使用 webpack ......
"每个专家都曾经是初学者" 你做得很好 :) 你的脚本的问题可能是一样的，似乎你的 javascript 文件没有被加载，因为它没有被提供，至少服务人员不是。
据我所知，您在生产版本中忘记了 output: {libraryTarget: 'var', library: 'Client'}, ;) 您不需要 HtmlWebpackPlugin 中的 filename: "./index.html" 条目，因为模板称为 index.html

标签： node.js express webpack

【解决方案1】：

Webpack 并不容易我承认你必须学习很多东西才能解决很多问题:)

以下是您的 webpack 的更优化版本。我建议使用webpack-merge 插件，或者，正如我将在小型应用程序中描述的那样，为 dev 和 prod 版本提供一个文件，然后您将绕过与您必须记住完成 dev 和 prod 版本这一事实相关的错误。

创建一个 webpack.config.js 而不是两个 dev/prod 文件

首先需要修改package.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 打开生成的构建。

【讨论】：

谢谢大家。回到家后，我将尝试解决我的 js 问题，并标记解决问题的答案。

【解决方案2】：

好的。我确切地确定了我的问题是什么。

如线程前面所述，我需要更新服务器以反映位于 /dist 文件夹中的静态资源。
js问题原来是我在加载器规则的正则表达式中使用了qoutes。

解决了。谢谢大家的帮助。

【讨论】：

【解决方案3】：

Webpack 开发版本正在运行，因为 webpack-dev-server 是在 8080 端口上启动的。所有CSS 样式都内嵌在<head> 标签中，您可以享受liveReload。

由于Express 配置，生产版本无法正常工作，请将您的配置更改为提供：

var path = require('path')
const express = require('express')
const mockAPIResponse = require('./mockAPI.js')
const cors = require('cors');

const app = express();

app.use(express.static('src/client'));
app.use(cors());

// designates what port the app will listen to for incoming requests
app.listen(8081, function () {
    console.log('Example app server listening on port 8081!');
})

app.use(express.static('dist'));

app.get('/test', function (req, res) {
    res.send(mockAPIResponse);
})

已添加行app.use(express.static('dist'));。在输出 dist 文件夹中发生静态页面服务，之前您只是将 index.html 文件与不正确的导入一起扔了。

在应用更改之前，运行生产构建并通过单击在浏览器中打开 index.html 文件并重新考虑样式是否正常工作。

简而言之：Express 设置错误，dist 文件夹应该是公开的

【讨论】：

此解决方案适用于我的样式，但我的 js 仍然出现故障。顺便谢谢你的回复。您是否故意将第一个 app.use 语句留在文件中？
一开始忘了删除，第二个想法是express可以同时服务两个静态文件夹，所以留下了一行。