Question

我有一个使用webpack 3.10.0运行（和工作）的项目，我已将其升级到最后一个webpack版本（4.8.3）。

要做到这一点，我必须更新我的webpack配置文件，但我的捆绑包有问题。当浏览器请求它们时，它们不会被发送。

我之前的webpack配置文件是：

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属性，但问题仍然存在。

修改：如果有人遇到同样的问题，我找到了描述问题的this issue。这不是一个理想的解决方案，但现在我正在使用@reyou

提供的解决方案

找不到Webpack捆绑包

0 个答案: