javascript - webpack-dev-middleware 与webpack-hot-middleware问题
本文介绍了javascript - webpack-dev-middleware 与webpack-hot-middleware问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
问题描述
开始正常,但是在使用webpack-dev-middleware 与webpack-hot-middlewae后导致javascript的响应头Conten-type发生改变,致使火狐浏览器和谷歌浏览器阻止javascript执行。
火狐提示
来自http://localhost:3000/javascripts/dist/manifest.bundle.js的资源已被阻止,因为 MIME 类型不匹配(X-Content-Type-Options: nosniff)。[详细了解] login
来自http://localhost:3000/javascripts/dist/main.bundle.js的资源已被阻止,因为 MIME 类型不匹配(X-Content-Type-Options: nosniff)。[详细了解] login
来自http://localhost:3000/javascripts/dist/vendor.bundle.js的资源已被阻止,因为 MIME 类型不匹配(X-Content-Type-Options: nosniff)。[详细了解] login
来自http://localhost:3000/javascripts/dist/main.bundle.js的资源已被阻止,因为 MIME 类型不匹配(X-Content-Type-Options: nosniff)。[详细
增加的代码
const webpack=require('webpack');
const webpackConfig = require('./public/javascripts/webpack.config');
const compiler = webpack(webpackConfig);
//使用webpacl-dev-middleware
app.use(require("webpack-dev-middleware")(compiler,{
noInfo:true,publicPath:webpackConfig.output.publicPath
}));
//使用webpack-hot-middleware
app.use(require("webpack-hot-middleware")(compiler));
webpack配置文件
const webpack = require('webpack');
const path=require('path');
const config={
entry:{
main:'./public/javascripts/login.js',
vendor:['react','react-dom']
},
output:{
filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
}
]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:['vendor','manifest']
})
]
};
module.exports=config;
解决方案
上述问题已经解决。
问题原因是没有将webpack-dev-middleware中关于publicPath的配置与href,src等请求路径对应起来,但是在使用webpack-dev-middleware之前,使用的是webpack cli编译的方式,href和src的路径是与webpack cli编译输出文件相对应的,这样就导致每次客户端发起请求,能找到文件,但是会导致content-type类型错误,导致浏览器不执行。
这篇关于javascript - webpack-dev-middleware 与webpack-hot-middleware问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文