Пакеты Webpack не найдены - PullRequest
Новая
       5

Пакеты Webpack не найдены

0 голосов
/ 17 мая 2018

У меня был проект, работающий (и работающий) с веб-пакетом 3.10.0, и я обновил его до последнего выпуска веб-пакета (4.8.3).

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

Мой предыдущий файл конфигурации веб-пакета: 

const webpack = require('webpack');
const Visualizer = require('webpack-visualizer-plugin');

module.exports = {
  entry: {
    app: ['./client/Client.jsx'],
    vendor: ['react', 'react-dom', 'react-router', 'react-router-dom', 'react-router-bootstrap', 'isomorphic-fetch', 'babel-polyfill'],
  },
  output: {
    path: `${__dirname}/static`,
    filename: 'app.bundle.js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
    new Visualizer(),
  ],
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
        },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8000, // convert images < 8kb to base64 strings
            name: 'images/[hash]-[name].[ext]',
          },
        }],
      },
    ],
  },
  devServer: {
    port: 8000,
    contentBase: 'static',
    proxy: {
      '*': {
        target: 'http://localhost:3000',
      },
    },
    historyApiFallback: true,
    https: true,
  },
  devtool: 'source-map',
};

Новый: 

const webpack = require('webpack');
const Visualizer = require('webpack-visualizer-plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const WriteFilePlugin = require('write-file-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './client/Client.jsx',
  },
  output: {
    path: path.join(__dirname, 'static'),
    filename: '[name].bundle.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  },

  plugins: [
    // new WriteFilePlugin(),
    new Visualizer(),
    // new HtmlWebpackPlugin(),
  //  new UglifyJsPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015'],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8000, // convert images < 8kb to base64 strings
            name: 'images/[hash]-[name].[ext]',
          },
        }],
      },
    ],
  },
  devServer: {
    port: 8000,
    contentBase: path.join(__dirname, 'static'),
    proxy: {
      '*': {
        target: 'http://localhost:3000',
      },
    },
    historyApiFallback: true,
    https: true,
  },
  devtool: 'source-map',
};

HTMLшаблон, который получает содержимое: 

export default function template(body) {
  return `<!DOCTYPE HTML>
  <html  lang='pt'>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MERN App</title>
    <script src="/bootstrap/jquery.min.js"></script>

    <script async src="/react.production.min.js"></script>

    <script async src="/react-dom.production.min.js"></script>

    <script async src="/bootstrap/react-bootstrap.min.js"></script>

    <link rel="stylesheet" href="/bootstrap/bootstrap.css" media="screen">
    <link rel="stylesheet" href="/SaudeBemEstar.css" >
    <link rel="stylesheet" href="/font-awesome.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  </head>
  <body>
    <div id="contents">${body}</div>
    <!-- this is where our component will appear By separating html from jsx the transformation of jsx to js stops happening during runtime-->
    <script async type = 'text/javascript'>
        if (!('serviceWorker' in navigator)) {
          console.log('Service worker not supported');
        }
        else {
          navigator.serviceWorker.register('sw.js')
          .then(function() {
            console.log('Registered');
          })
          .catch(function(error) {
            console.log('Registration failed:', error);
          });
        }

    </script>

    <script src="/vendor.bundle.js"></script>
    <script src="/app.bundle.js"></script>

  </body>
  </html>
  `;
}

Я также использовал WriteFilePlugin, чтобы увидеть, правильно ли созданы пакеты в нужной папке и все ли в порядке.Когда я делаю это, пакеты загружаются правильно.

В консоли также отсутствуют ошибки или предупреждения, кроме предупреждений, связанных с размером пакетов.

Все статические файлы загружаются,единственное, что не загружается, это комплекты.

Я также установил output.publicPath на другие значения, а затем изменил атрибут src в теге script, но проблема все еще возникла.

Редактировать: В случае, если кто-то столкнется с той же проблемой, я обнаружил эту проблему , которая описывает проблему.Это не идеальное решение, но сейчас я использую решение, предоставленное @ reyou

...