Question

我正在努力了解webpack的局和外出以及它的怪癖。所以我设置了一个使用webpack 1的项目（我知道它已经过时，但现在它可以满足我的需求），再加上react和redux。

在本地开发和测试时，它的功能就像魅力一样好。当我尝试将其设置为生产时，它全部都是A-wire。当我尝试访问应用程序时，我得到了一个着名的

未捕获的SyntaxError：意外的标记＆lt;

在检查firefox开发控制台和chrome dev控制台的时候，我看到源代码中的html文件就在那里，但是捆绑包没有。

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

Bellow是用于开发和制作的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正确获取。从中汲取的教训是，始终检查您的路径！

没有加载反应和webpack包

1 个答案: