0

现在部分发疯。我已经尝试解决这个问题一个多星期了，但似乎仍然无法解决它。

目前我正在尝试制作一个React使用 的应用程序React-Router，但是我没有使用Reduxor Flux。我从react-redux-starter-kit中获取了代码。我已经对它进行了一些试验，一切都运行良好，但是当我开始大量改变事情时，我遇到了问题。

问题是，当页面加载时，没有显示任何内容。当我什么都不说时，我的意思是不HTML，JS或CSS。所显示的只是由 a和标签组成的原始基本HTML文件。启动终端时，我可以看到文件正在由 加载，如下所示：<header><body>webpack

Server is now running at http://192.168.0.9:3000.
webpack built 928ca955f4efc3417ea7 in 11490ms
Hash: 928ca955f4efc3417ea7
Version: webpack 1.13.2
Time: 11490ms
                                  Asset       Size  Chunks             Chunk Names
   2abdf22181eb309fd513564971a12163.png    70.2 kB          [emitted]
   148e6bc6eabab75f3e18eddc2d99a10f.png      34 kB          [emitted]  
            app.928ca955f4efc3417ea7.js    1.04 MB       0  [emitted]  app
    1.charities.928ca955f4efc3417ea7.js    2.31 kB       1  [emitted]  charities
         vendor.928ca955f4efc3417ea7.js     405 kB       2  [emitted]  vendor
        app.928ca955f4efc3417ea7.js.map    1.29 MB       0  [emitted]  app
1.charities.928ca955f4efc3417ea7.js.map    3.53 kB       1  [emitted]  charities
     vendor.928ca955f4efc3417ea7.js.map     487 kB       2  [emitted]  vendor
                            favicon.ico    30.9 kB          [emitted]  
                             index.html  491 bytes          [emitted]    
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  565 kB       0        
webpack: bundle is now VALID.

但是，当我加载页面时，这些项目都没有显示。我以为html-webpack-plugin应该注入必要的文件，但它没有这样做。我不知道为什么没有必要的文件被加载到我的 HTML 文件中。我的 webpack 配置是这样的：

import webpack from 'webpack'
import cssnano from 'cssnano'
import postcssNested from 'postcss-nested'
import postcssSimpleVars from 'postcss-simple-vars'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import config from '../config'

const paths = config.utils_paths
const {__PROD__} = config.globals

const webpackConfig = {
  name: 'client',
  target: 'web',
  devtool: config.compiler_devtool,
  resolve: {
    root: paths.client(),
    extensions: ['', '.js', '.json']
  },
  module: {}
}

const APP_ENTRY_PATHS = [
  'babel-polyfill',
  paths.client('main.js'),
  `webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`
]

webpackConfig.entry = {
  app: APP_ENTRY_PATHS,
  vendor: config.compiler_vendor
}

webpackConfig.output = {
  filename: `[name].[${config.compiler_hash_type}].js`,
  path: paths.dist(),
  publicPath: config.compiler_public_path
}

webpackConfig.plugins = [
  new webpack.DefinePlugin(config.globals),
  new HtmlWebpackPlugin({
    template: paths.client('index.html'),
    hash: false,
    favicon: paths.client('static/favicon.ico'),
    filename: 'index.html',
    inject: 'body',
    minify: {
      collapseWhitespace: true
    }
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor']
  })
]

if (__PROD__) {
  webpackConfig.plugins.push(
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        unused: true,
        dead_code: true,
        warnings: false
      }
    })
  )
}

webpackConfig.module.loaders = [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      plugins: ['transform-runtime'],
      presets: ['es2015', 'react', 'stage-1']
    }
  },
  {
    test: /\.json$/,
    loader: 'json'
  }
]

const BASE_CSS_LOADER = 'css?sourceMap&-minimize'

const cssModulesRegex = new RegExp(
  `(${paths.client().replace(/[\^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\{\}\,]/g, '\\$&')})`
)

const cssModulesLoader = [
  BASE_CSS_LOADER,
  'modules',
  'importLoaders=1',
  'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&')

webpackConfig.module.loaders.push({
  test: /\.css$/,
  include: cssModulesRegex,
  loaders: [
    'style',
    cssModulesLoader,
    'postcss'
  ]
})

webpackConfig.module.loaders.push({
  test: /\.css$/,
  exclude: cssModulesRegex,
  loaders: [
    'style',
    BASE_CSS_LOADER,
    'postcss'
  ]
})

webpackConfig.postcss = [
  cssnano({
    autoprefixer: {
      add: true,
      remove: true,
      browsers: ['last 2 versions']
    },
    discardComments: {
      removeAll: true
    },
    discardUnused: false,
    mergeIdents: false,
    reduceIdents: false,
    safe: true,
    sourcemap: true
  }),
  postcssNested(),
  postcssSimpleVars({
    variables: function () {
      return require(paths.client('styles/variables'));
    }
  })
]

webpackConfig.module.loaders.push(
  { test: /\.woff(\?.*)?$/,  loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' },
  { test: /\.woff2(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' },
  { test: /\.otf(\?.*)?$/,   loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' },
  { test: /\.ttf(\?.*)?$/,   loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
  { test: /\.eot(\?.*)?$/,   loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
  { test: /\.svg(\?.*)?$/,   loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
  { test: /\.(png|jpg)$/,    loader: 'url?limit=8192' }
)

export default webpackConfig

请帮我弄清楚为什么我index.html没有被注入任何所需的文件。所显示的都是原件index.html。如果您想要我目前使用的所有文件，可以在此处查看。谢谢，请帮忙！！

4

1 回答 1

1

看起来所提供的只是您在其中配置的后备和静态处理程序server/main.js

app.use(express.static(root));
app.use(fallback('index.html', { root }));

如果您删除该请求将无限期挂起。这不是唯一必要的解决方法，但它有望帮助您找到问题的根源。

于 2016-09-15T07:25:47.930 回答