Question

我第一次尝试使用webpack和reactjs，似乎在浏览器方面遇到了一些问题。

使用Chrome时，我得到：

GET http://127.0.0.1:5000/static/js/scripts.min.js 
net::ERR_CONNECTION_RESET

当我在浏览器中访问网址http://127.0.0.1:5000/static/js/scripts.min.js时，它不会下载整个scripts.min.js文件。

Firefox给我The connection was reset似乎也有同样的问题。但是Microsoft Edge根本没有这个问题。

目前我正在使用Flask开发网络服务器，但在使用gunicore时我也遇到了同样的问题。

以下是运行webpack的输出：

Hash: 6a5e4d31211a54d39531
Version: webpack 1.13.2
Time: 6577ms
         Asset     Size  Chunks             Chunk Names
scripts.min.js  1.89 MB       0  [emitted]  main
    + 172 hidden modules

这是我的webpack.config.js：

var debug = process.env.NODE_ENV !== 'production';
var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: path.join(__dirname, '/src'),
  devtool: debug ? 'inline-sourcemap' : null,
  entry: './js-src/scripts.js',
  watch: true,
  module: {
    loaders: [
      {
        test: /.js?$/,
        exclude: /(node_modules)|(bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0']
        }
      }
    ]
  },
  output: {
    path: path.join(__dirname, '/src/wwwroot/static/js'),
    publicPath: '/static/js',
    filename: 'scripts.min.js'
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};`

这是我的reactjs代码：

import React from 'react';
import ReactDOM from 'react-dom';

class Layout extends React.Component {
  render() {
    return (
        <h1>This is a test!</h1>
      );
  }
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

现在如果我用NODE_ENV=production webpack运行它会导致生成插件被添加，我永远不会收到错误。以下是添加NODE_ENV=production webpack：

的输出

Hash: 7cef10c1a8547cfe93ca
Version: webpack 1.13.2
Time: 3804ms
         Asset    Size  Chunks             Chunk Names
scripts.min.js  372 kB       0  [emitted]  main
    + 172 hidden modules

WARNING in scripts.min.js from UglifyJs
Condition always true [../~/react/lib/ReactDOMComponentTree.js:97,0]
Condition always true [../~/react/lib/traverseAllChildren.js:136,0]
Condition always true [../~/react/lib/ReactNodeTypes.js:36,0]
Condition always true [../~/react/lib/instantiateReactComponent.js:91,0]
Condition always true [../~/react/lib/ReactDOMComponent.js:981,0]
Condition always true [../~/react/lib/ReactMultiChild.js:265,0]
Condition always true [../~/react/lib/ReactMultiChild.js:285,0]
Side effects in initialization of unused variable Transaction [../~/react/lib/ReactServerUpdateQueue.js:18,0]
Condition always true [../~/react/lib/findDOMNode.js:54,0]
Condition always true [../~/react/lib/findDOMNode.js:56,0]

现在我也可以在没有制作的情况下运行它（仅webpack），并且总是添加插件new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),，有时它会起作用，有时它也不会。

部分webpack.config.js只有插件部分：

plugins: [
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],

webpack输出：

Hash: 6a5e4d31211a54d39531
Version: webpack 1.13.2
Time: 4475ms
         Asset     Size  Chunks             Chunk Names
scripts.min.js  2.77 MB       0  [emitted]  main
    + 172 hidden modules

WARNING in scripts.min.js from UglifyJs
Condition always true [../~/react/lib/traverseAllChildren.js:136,0]
Condition always true [../~/react/lib/ReactDOMComponentTree.js:97,0]
Condition always true [../~/react/lib/ReactDOMComponent.js:981,0]
Condition always true [../~/react/lib/ReactMultiChild.js:265,0]
Condition always true [../~/react/lib/ReactMultiChild.js:285,0]
Condition always true [../~/react/lib/instantiateReactComponent.js:91,0]
Condition always true [../~/react/lib/ReactNodeTypes.js:36,0]
Side effects in initialization of unused variable Transaction [../~/react/lib/ReactServerUpdateQueue.js:18,0]
Condition always true [../~/react/lib/findDOMNode.js:54,0]
Condition always true [../~/react/lib/findDOMNode.js:56,0]

任何人都知道这个问题的根本原因吗？

谢谢！

修改1

我对webpack.config.js进行了更改。我改变了devtool线：从devtool: debug ? 'inline-sourcemap' : null,到devtool: debug ? 'source-map' : null,，webpack输出为：

Hash: 6a5e4d31211a54d39531
Version: webpack 1.13.2
Time: 2206ms
             Asset    Size  Chunks             Chunk Names
    scripts.min.js  742 kB       0  [emitted]  main
scripts.min.js.map  864 kB       0  [emitted]  main
    + 172 hidden modules

现在我仍然在Chrome中获得net::ERR_CONNECTION_RESET，但它似乎可以在Firefox和Edge中使用。

浏览器不会下载整个javascript文件

0 个答案: