Node.js 网页包输出中的Mimetype错误(使用敲除)
这是我第一次使用击倒。我想将其用于node、webpack和es6,但由于某些原因,我正在创建的捆绑包在浏览器中导致错误: 拒绝从“”执行脚本,因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查 我的webpack.config.js是:Node.js 网页包输出中的Mimetype错误(使用敲除),node.js,knockout.js,webpack,mime-types,webpack-dev-server,Node.js,Knockout.js,Webpack,Mime Types,Webpack Dev Server,这是我第一次使用击倒。我想将其用于node、webpack和es6,但由于某些原因,我正在创建的捆绑包在浏览器中导致错误: 拒绝从“”执行脚本,因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查 我的webpack.config.js是: const path = require('path') module.exports = { output: { path: path.resolve('build', './bundle.
const path = require('path')
module.exports = {
output: {
path: path.resolve('build', './bundle.js'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.html$/, loader: 'html'
},
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
},
]
}
};
package.json文件是:
{
"name": "neighborhoodmap",
"version": "1.0.0",
"description": "Neighborhood Map App with API Calls",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"knockout": "^3.4.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"html-loader": "^0.5.1",
"imports-loader": "^0.7.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.5"
}
}
app.js文件是:
import ko from 'knockout';
class MyApp {
constructor() {
this.message = "Hello World";
}
}
ko.applyBindings(new MyApp())
而实际的index.html是:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Neighborhood Map</title>
</head>
<body>
<h1 data-bind="text: message"></h1>
<script type="text/javascript" src="build/bundle.js"></script>
</body>
</html>
邻域地图
我正在使用webpack dev server为应用程序提供服务,但即使我只是将index.html放在浏览器中,捆绑包仍然存在错误:
“未捕获的语法错误:意外标记<对于build/bundle.js:1”
有没有办法指定bundle输出的mimetype?或者也许我的webpack.config.js错了?任何帮助都将不胜感激。对于遇到相同问题的任何人,我通过在模块属性下的webpack配置文件中包含一个noParse来解决我的问题,以阻止webpack解析淘汰版本。最后一个webpackconfig.js文件如下所示:
const path = require('path');
module.exports = {
devtool: 'sourcemap',
entry: './app.js',
output: {
path: path.resolve('build', ''),
filename: 'bundle.js'
},
module: {
noParse: /node_modules\/knockout\/build\/output\/*.js/,
loaders: [
{
test: /\.html$/, loader: 'html'
},
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
]
}
};