3

所以,我使用的是webpack 2 + typescript + babel,在谷歌浏览器和firefox中一切正常。IE 11 - 扔'webpackJsonp'是undefined

但是,当我试图在IE11中打开我的应用程序,它是抛出webpackJsonp是未定义的。

看起来像我缺少一些配置或缺少任何webpack插件/预设。

我的打字稿及的WebPack CONFIGS低于:

tsconfig

{ 
"compilerOptions": { 
    "outDir": "./dist/", 
    "sourceMap": true, 
    "noImplicitAny": false, 
    "module": "commonjs", 
    "target": "es5", 
    "jsx": "react", 
    "allowSyntheticDefaultImports": true, 
    "baseUrl": ".", 
    "paths": { 
     "*": [ 
      "src/*", 
      "node_modules/*" 
     ] 
    } 
}, 
"include": [ 
    "./src/**/*" 
] 

}

webpack.config

require("babel-polyfill"); 

const webpack = require("webpack"); 
const { resolve } = require("path"); 
const translationMerger = require("./translation-merger"); 
const { CheckerPlugin, TsConfigPathsPlugin } = require("awesome-typescript-loader"); 
const WebpackPreBuildPlugin = require('pre-build-webpack'); 
const StyleLintPlugin = require('stylelint-webpack-plugin'); 
const WatchIgnorePlugin = require('watch-ignore-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 

module.exports = { 

    resolve: { 
     extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".jsx", ".less", ".css", ".scss"], 
     modules: [resolve(__dirname, 'src'), 'node_modules'] 
    }, 
    entry: { 
     main: ["babel-polyfill", 
     "react-hot-loader/patch", // activate HMR for React 
     "webpack-dev-server/client?http://localhost:8080",// bundle the client for webpack-dev-server and connect to the provided endpoint 
     "webpack/hot/only-dev-server", // bundle the client for hot reloading, only- means to only hot reload for successful updates 
     "./index.tsx"], // the entry point of our app 
     silentRenew: ['./silentRenew.ts'] 
    }, 
    output: { 
     filename: '[name].bundle.js', // the output bundle 
     chunkFilename: '[name]-chunk.js', 
     path: resolve(__dirname, "dist"), 
     publicPath: "/" // necessary for HMR to know where to load the hot update chunks 
    }, 

    context: resolve(__dirname, "src"), 
    devtool: "source-map", 

    devServer: { 
     hot: true, // enable HMR on the server 
     contentBase: resolve(__dirname, "dist"), // match the output path 
     historyApiFallback: true, // allow a web page to be served in place of any 404 responses 
     publicPath: "/" // match the output `publicPath` 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       enforce: 'pre', 
       loader: 'tslint-loader', 
       options: { /* Loader options go here */ } 
      }, 
      { 
       test: /\.js$/, 
       use: ["babel-loader", "source-map-loader"], 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.tsx?$/, 
       use: "awesome-typescript-loader", 
       exclude: [ 
        /node_modules/, 
        /\.spec|test.tsx?$/ 
       ] 
      }, 
      { 
       test: /\.css$/, 
       loaders: ["style-loader", "css-loader"] 
      }, 
      { 
       test: /\.less$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader', 'less-loader'] 
       }) 
      }, 
      { 
       test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
       loader: 'file-loader?name=fonts/[name].[ext]' 
      }, 

      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loader: "file-loader?name=images/[name].[ext]" 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['style-loader', 'css-loader', 'sass-loader'] 
      } 
      // { 
      //  test: /\.(jpe?g|png|gif|svg)$/i, 
      //  loaders: [ 
      //   'file-loader?limit=100000000&hash=sha512&digest=hex&name=[hash].[ext]', 
      //   'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false' 
      //  ] 
      // } 
     ], 
    }, 

    plugins: [ 
     new webpack.LoaderOptionsPlugin({ 
      debug: true 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: function (module) { 
       // this assumes your vendor imports exist in the node_modules directory 
       return module.context && (module.context.indexOf('node_modules') !== -1) 
      } 
     }), 
     new CheckerPlugin(), 
     // new StyleLintPlugin({ 
     //  files: ['themes/dh-theme-2017/**/*.less'], 
     //  syntax: 'less' 
     // }), 
     new webpack.HotModuleReplacementPlugin(), // enable HMR globally 
     new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates 
     new TsConfigPathsPlugin({ tsconfig: './tsconfig.json', compiler: 'typescript' }), 

     new ExtractTextPlugin('themes/dh/styles.css'), 
     new WebpackPreBuildPlugin((stats) => translationMerger(resolve(__dirname, 'src/services/localisation/'))), // Merge translation files 
     new WatchIgnorePlugin([ 
      resolve(__dirname, 'src/services/localisation/translations.json'), // Ignore translation json generated by the translation merge to avoid endless build loop 
     ]), 
     new CopyWebpackPlugin([ 
      { from: resolve(__dirname, 'app.json') }, 
      { from: resolve(__dirname, 'app.deploy.json') }, 
      { from: resolve(__dirname, 'public/index.html') },]) 
    ], 
    performance: { 
     hints: false 
    } 
}; 

非常感谢您的帮助/提示!

+0

.html文件可以帮助确定问题。 –

+0

我的index.html看起来像这样 -

+0

@AbhishekShukla你设法解决这个问题吗? –

回答

0

uglifyjs-webpack-plugin节点模块升级到版本1.1.2后,我收到同样的错误。 让我们回到0.4.6解决了这个对我来说

我没有看到这个模块在你的配置,但我希望这可以帮助别人使用Google这个问题