反应与webpack捆绑不上膛

Question

我想了解webpack的投篮和出游，这是很奇怪的。因此，我已经建立了一个项目，与webpack 1(我知道这是过时的，但就目前来说，它将对我的需要)，再加上反应和削减。

在本地开发和测试时，它的作用就像魅力一样，一切都是好的。当我试着把它投入生产时，一切都是一帆风顺。当我试图访问这个应用程序时，我得到了一个著名的

未登录的SyntaxError:意外令牌<

在检查firefox控制台和chrome控制台时，我看到源上有html文件，但是包不在那里。

包是在相应的文件夹上生成的，无论是在开发模式中还是在生产模式下。我尝试为相对路径添加一个点，删除相对路径上的点，移动js包文件的位置，将其设置为异步，但仍然没有解决方案。

贝娄是webpack为开发和生产而配置的。

开发webpack文件结构

const webpack = require('webpack');
const path = require('path');
//const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: ['whatwg-fetch','./src/index.js'],
  module: {
    devtool: 'source-map',
    loaders: [
      {
        test: /\.js?$/, 
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test:/\.jsx$/, 
        loader: 'babel',
        exclude: /node_modules/,
      },
      { 
        test: /\.scss$/, 
        loader: 'style!css!sass'
       },{ 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'file'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js','.jsx']
  },
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),

     /* new CleanWebpackPlugin(['dist'], {

      verbose: true, 
      dry: false,
      exclude: ['index.html','server.bundle.js','dbFactory.js','httpService.js']
    })  */


  ]
};

Webpack生产文件结构

const config = require('./webpack.config.js');
const webpack = require('webpack');

config.plugins.push(
  new webpack.DefinePlugin({
    "process.env": {
      "NODE_ENV": JSON.stringify("production")
    }
  })
);

config.plugins.push(
  new webpack.optimize.UglifyJsPlugin({
    comments:false,
    minimize:true,
    mangle:true,
    compress: {
      warnings: false,
      sequences: true,
      dead_code: true,
      conditionals: true,
      booleans: true,
      unused: true,
      if_return: true,
      join_vars: true,
      drop_console: true,
      screw_ie8: true, 
    }
  })
);

config.plugins.push(
  new webpack.optimize.DedupePlugin()
);
/*
config.plugins.push(
  new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      entries:['history',
                'react',
                'react-dom',
                'react-router',
                'react-redux',
                'redux'],
      chunks:['vendor'],
      minChunks:Infinity
    })
);*/
module.exports = config;

生成包的package.json命令如下所示

"postinstall": "webpack -p --config webpack.prod.config.js --progress --colors"

Answer 1

现在，有了更多的时间和一些console.log滥用，看起来实际的包是在正确的文件夹上创建的，但是它不是通过express正确获得的。一个教训是，永远检查你的道路！