Webpack production build styles do not appear

问题

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.

i have output rules defined in my config files for both production and development environments......but clearly i made a mistake somewhere along the line

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.

I'm about to ask some questions, forgive me if they are stupid.

I'm struggling to understand why, currently, my production and development builds are not behaving the same. when i run my dev build, all my styles and js work correctly, however when i run my production build, none of my styles or js work. The dist folder is populated with all the expected bundled files (all my minified css and js is there) and all of the paths in the index.html that is generated seem to point to the correct places in the dist folder.....I'm posting a link to the github repo below.

Looking for any tips or clues. please feel free to ask for more info, I don't really have the first idea of where to start looking (that I haven't already checked) for the cause. the course material i'm consuming online about webpack was pretty poor in my opinion......

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

回答1:

Webpack is not easy I admit you have to learn a lot to solve many problems :)

Below is a more optimal version of your webpack. I recommend using the webpack-merge plugin or, as I will describe in small applications, one file for the dev and prod versions, then you will bypass errors related to the fact that you have to remember to complete the dev and prod versions.

Instead of two dev/prod files, create one webpack.config.js

At first it needs to be modified 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"
},

And now the most important part of 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
      )
    ]
  }
}

if you use vscode I recommend using this plugin to open generated builds.

回答2:

alright. I determined exactly what my problems were.

as noted earlier in the thread, I needed to update my server to reflex my static resources being located in the /dist folder.
the js problem turned out to be that I had used qoutes in the regex in the loader rules.

Solved. Thanks for the help everyone.

回答3:

Webpack dev build is working, because the webpack-dev-server is launched on 8080 port. All CSS styles are inserted inline in <head> tag and you can enjoy liveReload.

Production build is not working because of Express config, change your config to provided:

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);
})

Was added the line app.use(express.static('dist'));. Happened static serving of pages in output dist folder, previously you just threw the index.html file with incorrect imports.

Before applying the changes, run production build and open index.html file in browser by clicking and reconsider, that styles are working correctly.

In short: wrong Express setup, dist folder should be public

来源：https://stackoverflow.com/questions/59783748/webpack-production-build-styles-do-not-appear

标签

node.js

express

Webpack