我使用Webpack bundler和Webpack dev服务器进行本地开发。前端位于React.js + Redux中，后端位于Node.js和koajs中。Webpack dev服务器抛出错误 - 拒绝执行脚本，因为它的MIME类型（'text/html'）不可执行

在后端，我使用passportjs库进行用户认证和其他库koa-passport，passport-facebook，passport-google-auth通过Facebook或谷歌认证。基本上，我实施了koa-passport-example。

如果我的应用程序需要用户重定向到Facebook或谷歌登录页面，的WebPack开发服务器抛出错误：

GET http://localhost:8090/auth/bundle.js net::ERR_ABORTED 

Refused to execute script from 'http://localhost:8090/auth/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 

如果我用的WebPack生成包，并将其驻留的Node.js服务器上，我不得到这个错误。我需要找出如何设置Webpack dev服务器来摆脱此错误消息。

的package.json

"scripts": { 
    "debug": "./node_modules/nodemon/bin/nodemon.js --inspect ./script/server.js", 
    "webpack": "npm run serve | npm run dev", 
    "start": "node ./script/server.js", 
    "serve": "./node_modules/.bin/http-server -p 8080", 
    "dev": "webpack-dev-server -d --progress --colors --port 8090 --hot --inline", 
    }, 
     "dependencies": { 
     "@koa/cors": "^2.2.1", 
     "actions": "^1.3.0", 
     "aws-s3-form": "^0.3.5", 
     "aws-sdk": "^2.165.0", 
     "axios": "^0.16.2", 
     "bootstrap": "^3.3.7", 
     "bootstrap-timepicker": "github:janzenz/bootstrap-timepicker#feature/compatibility-es6", 
     "d3-ease": "^1.0.3", 
     "d3-selection": "^1.1.0", 
     "d3-shape": "^1.2.0", 
     "d3-transition": "^1.1.0", 
     "font-awesome": "^4.7.0", 
     "http-server": "^0.10.0", 
     "immutable": "^3.8.2", 
     "jquery": "^3.2.1", 
     "jquery-ui": "^1.12.1", 
     "jquery.panzoom": "^3.2.2", 
     "jsonwebtoken": "^8.1.0", 
     "juration": "^0.1.0", 
     "knex": "^0.14.2", 
     "koa": "^2.3.0", 
     "koa-body": "^2.5.0", 
     "koa-bodyparser": "^4.2.0", 
     "koa-logger": "^3.1.0", 
     "koa-passport": "^4.0.1", 
     "koa-ratelimit": "^4.0.0", 
     "koa-router": "^7.2.1", 
     "koa-send": "^4.1.1", 
     "koa-session": "^5.5.1", 
     "koa-static": "^4.0.2", 
     "moment": "^2.18.1", 
     "objection": "^0.9.2", 
     "oembed-auto": "0.0.3", 
     "passport": "^0.4.0", 
     "passport-facebook": "^2.1.1", 
     "passport-google-oauth": "^1.0.0", 
     "passport-jwt": "^3.0.1", 
     "pg": "^7.4.0", 
     "probe-image-size": "^3.1.0", 
     "puppeteer": "^0.12.0", 
     "react": "^15.6.1", 
     "react-dom": "^15.6.1", 
     "react-dropzone": "^4.2.1", 
     "react-facebook-login": "^3.6.2", 
     "react-google-login": "^3.0.2", 
     "react-modal": "^3.1.2", 
     "react-redux": "^5.0.6", 
     "react-router": "^4.2.0", 
     "react-router-dom": "^4.2.2", 
     "react-router-redux": "^4.0.8", 
     "react-share": "^1.17.0", 
     "react-transition-group": "^1.2.1", 
     "react-twitter-widgets": "^1.7.1", 
     "redux": "^3.7.2", 
     "redux-thunk": "^2.2.0", 
     "request": "^2.83.0", 
     "request-promise-native": "^1.0.5", 
     "select2": "^4.0.4", 
     "select2-bootstrap-theme": "0.1.0-beta.10", 
     "shave": "^2.1.3", 
     "sqlite3": "^3.1.13", 
     "sugar-date": "^2.0.4", 
     "svg-url-loader": "^2.3.0", 
     "twitter": "^1.7.1", 
     "twitter-widgets": "^1.0.0", 
     "unfluff": "^1.1.0" 
     }, 
     "devDependencies": { 
     "autoprefixer": "^7.1.4", 
     "babel": "^6.23.0", 
     "babel-core": "^6.26.0", 
     "babel-loader": "^7.1.2", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "css-loader": "^0.28.7", 
     "duplicate-package-checker-webpack-plugin": "^2.0.2", 
     "eslint": "^4.7.2", 
     "eslint-config-airbnb": "^15.1.0", 
     "eslint-plugin-import": "^2.7.0", 
     "eslint-plugin-jsx-a11y": "^5.1.1", 
     "eslint-plugin-react": "^7.4.0", 
     "favicons-webpack-plugin": "0.0.7", 
     "file-loader": "^0.11.2", 
     "friendly-errors-webpack-plugin": "^1.6.1", 
     "html-webpack-plugin": "^2.30.1", 
     "less": "^2.7.2", 
     "less-loader": "^4.0.5", 
     "node-sass": "^4.5.3", 
     "nodemon": "^1.12.1", 
     "npm-install-webpack-plugin": "^4.0.5", 
     "postcss": "^6.0.11", 
     "postcss-loader": "^2.0.6", 
     "sass-loader": "^6.0.6", 
     "style-loader": "^0.18.2", 
     "url-loader": "^0.5.9", 
     "webpack": "^3.6.0", 
     "webpack-dev-server": "^2.9.1", 
     "webpack-merge": "^4.1.0", 
     "webpack-notifier": "^1.5.0" 
     } 

webpack.config.js

const webpack = require('webpack'); 
const webpackMerge = require('webpack-merge'); 
const path = require('path'); 
const WebpackNotifierPlugin = require('webpack-notifier'); 
const autoprefixer = require('autoprefixer'); 

const TARGET = process.env.npm_lifecycle_event; 
console.log(`target event is ${TARGET}`); 

let outputFileName = 'app'; 
outputFileName += TARGET === 'prod' ? '.min.js' : '.js'; 

const common = { 
    entry: { 
    app: './index.jsx', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js[x]?$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
      loader: 'babel-loader?presets[]=es2015&presets[]=react', 
     }, 
     }, 
     { 
     test: /\.scss$/, 
     loaders: [ 
      'style-loader', 
      'css-loader', 
      'sass-loader', 
     ], 
     }, 
     { 
     test: /\.less$/, 
     loaders: ['style-loader', 'css-loader', 'less-loader'], 
     }, 
     { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'], 
     }, 
     { 
     test: /\.(eot|ttf|svg|gif|png|jpg|otf|woff|woff2)$/, 
     loader: 'url-loader', 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     jQuery: 'jquery', 
     $: 'jquery', 
     jquery: 'jquery', 
     'window.jQuery': 'jquery', 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     postcss: [ 
      autoprefixer({ 
      browsers: ['last 3 versions'], 
      }), 
     ], 
     }, 
    }), 
    new WebpackNotifierPlugin(), 
    ], 
}; 

if (TARGET === 'dev' || !TARGET) { 
    module.exports = webpackMerge(common, { 
    devtool: 'eval-source-map', 
    output: { 
     filename: 'bundle.js', 
     sourceMapFilename: '[file].map', 
    }, 
    devServer: { 
     contentBase: path.resolve(__dirname), // New 
     historyApiFallback: true, 
    }, 
    }); 
} 

login.jsx

... 
    <a href="/auth/facebook" className="btn btn--secondary ut-font-decima">Logina> 
... 

server.js

const Koa = require('koa'); 
const Router = require('koa-router'); 
const logger = require('koa-logger'); 
const cors = require('@koa/cors'); 
const bodyParser = require('koa-bodyparser'); 
const serve = require('koa-static'); 
const path = require('path'); 
const session = require('koa-session'); 

const app = new Koa(); 
// trust proxy 
app.proxy = true; 

const router = new Router(); 

// sessions 
app.keys = ['your-session-secret']; 
app.use(session({}, app)); 

app.use(logger()); 
app.use(cors()); 
app.use(bodyParser()); 

require('./controllers/auth'); 
const passport = require('koa-passport'); 

app.use(passport.initialize()); 
app.use(passport.session()); 

app.use(serve(path.join(process.env.PWD, '/dist'))); 

router 
    .get('/auth/facebook', passport.authenticate('facebook')) 
    .get(
    '/auth/facebook/callback', 
    passport.authenticate('facebook', { 
     successRedirect: '/podcast', 
     failureRedirect: '/', 
    }), 
); 

app.use(router.routes()).use(router.allowedMethods()); 

// don't listen to this port if the app is required from a test script 
if (!module.parent) { 
    app.listen(process.env.PORT || 1337); 
    console.log('app listen on port: 1337'); 
}