Стили производственной сборки Webpack не отображаются

Question

РЕДАКТИРОВАТЬ: хорошо, я исправил проблему со своими стилями, исправив файл моего сервера. Я забыл обновить путь к ресурсам stati c. Тем не менее, у меня все еще есть проблема. Мой javascript по-прежнему не запускается правильно.

У меня есть правила вывода, определенные в моих конфигурационных файлах как для рабочей среды, так и для среды разработки ...... но ясно, что я сделал ошибка где-то вдоль линии

хорошо, прежде чем я опубликую это, я просто хочу сказать, что я довольно сильно борюсь с веб-пакетом. У меня есть от 6 до 8 месяцев обучения на внешнем интерфейсе, так что я уже нахожусь на стыке с новыми языками и технологиями, и это недавнее путешествие по миру инструментов для сборки может оказаться больше, чем я могу вынести ,

Я собираюсь задать несколько вопросов, простите, если они глупы.

Я изо всех сил пытаюсь понять, почему в настоящее время мои производственные и разрабатываемые сборки не ведут себя одинаково. когда я запускаю свою разработку, все мои стили и js работают правильно, однако, когда я запускаю свою производственную сборку, ни один из моих стилей или js не работает. Папка dist заполняется всеми ожидаемыми связанными файлами (все мои минимизированные css и js есть) и всеми путями в индексе. html, который создается, кажется, указывает на правильные места в dist папка ..... я выкладываю ссылку на репозиторий github ниже.

Ищу какие-либо подсказки или подсказки. пожалуйста, не стесняйтесь спрашивать больше информации, у меня нет первого представления о том, где начать искать (что я еще не проверил) причину. материал курса, который я потребляю онлайн о веб-пакете, был, на мой взгляд, довольно скудным ......

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

Answer 1

Webpack - это не просто. Я признаю, что вам нужно многому научиться, чтобы решить множество проблем:)

Ниже приведена более оптимальная версия вашего веб-пакета. Я рекомендую использовать плагин webpack-merge или, как я опишу в небольших приложениях, один файл для версий dev и prod, тогда вы будете обходить ошибки, связанные с тем, что вам необходимо помнить о завершении версий dev и prod.

Вместо двух файлов 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, я рекомендую использовать этот плагин для открытия сгенерированных сборок.

Answer 2

хорошо. Я точно определил, в чем заключались мои проблемы.

1. , как отмечалось ранее в теме, мне нужно было обновить сервер, чтобы отражать мои ресурсы stati c, находящиеся в папке / dist.

2. проблема js оказалась в том, что я использовал qoutes в регулярном выражении в правилах загрузчика.

Решено. Спасибо всем за помощь.

Answer 3

Webpack dev build работает, потому что 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'));. Произошло stati c обслуживание страниц в выходной папке dist, ранее вы просто выбросили файл index.html с некорректным импортом.

Перед применением изменений запустите производственную сборку и откройте файл index.html в браузере нажав и пересмотрев, что стили работают правильно.

Короче: неверно Express setup, папка dist должна быть опубликована c