Invalid Host/Origin header
問題表述比較明確：請求的header中Host或Origin沒有通過檢測。
本人是開發環境下webpack-dev-server熱更新出現的問題。主要是本地開發使用了charles代理，瀏覽器使用域名訪問代理到本機的localhost:8080。熱更新是vue-cli原生的配置
// these devServer options should be customized in /config/index.js devServer: { ... hot: true, host: HOST || config.dev.host, port: PORT || config.dev.port, ... }
網上的建議大多是添加一個“disableHostCheck: true”，官網都說了不推薦：不建議這樣做，因為不檢查主機的應用容易受到DNS重新綁定攻擊的攻擊。
使用另外一個東東：allowedHosts來解決就行。
至於要實現熱更新，熱更新請求也要代理到localhost:8080 【端口根據自己的情況定】
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 00007FF6A8FEF04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114 2: 00007FF6A8FCA0C6 node::MakeCallback+4518 3: 00007FF6A8FCAA30 node_module_register+2032 4: 00007FF6A92520EE v8::internal::FatalProcessOutOfMemory+846 5: 00007FF6A925201F v8::internal::FatalProcessOutOfMemory+639 6: 00007FF6A9772BC4 v8::internal::Heap::MaxHeapGrowingFactor+9556 7: 00007FF6A9769C46 v8::internal::ScavengeJob::operator=+24310 8: 00007FF6A976829C v8::internal::ScavengeJob::operator=+17740 9: 00007FF6A9770F87 v8::internal::Heap::MaxHeapGrowingFactor+2327 10: 00007FF6A9771006 v8::internal::Heap::MaxHeapGrowingFactor+2454 11: 00007FF6A932CDB7 v8::internal::Factory::NewFillerObject+55 12: 00007FF6A93C2CC6 v8::internal::WasmJs::Install+29414
明顯內存不夠。可能原因：
1.電腦本身的內存小
2.項目中雜入了一些其他文件（本人就誤操作將一個11M的js放到了項目一個文件中，導致打包時內存不夠）
swiper引入打包報錯：ERROR in static/js/2.bbc3c185f3337ecd8199.js from UglifyJs
ERROR in static/js/2.bbc3c185f3337ecd8199.js from UglifyJs Unexpected token: name «Dom7», expected: punc «;» [./node_modules/dom7/dist/dom7.modular.js:16,0][static/js/2.bbc3c185f3337ecd8199.js:75614,6]
原因是引入swiper4.5.0
import Swiper from 'swiper'; import 'swiper/dist/css/swiper.css'
升級webpack4遇到的相關問題
可以參考：https://segmentfault.com/a/1190000014516899
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
網絡上這個問題基本方案都指向用extract-text-webpack-plugin升級為mini-css-extract-plugin。實際上還可能是因為optimize-css-assets-webpack-plugin版本過低導致
Module parse failed: Unexpected character ''
ERROR in Error: Child compilation failed: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no load ers are configured to process this file. See https://webpack.js.org/concepts#l oaders (Source code omitted for this binary file): SyntaxError: Unexpected character '' (1:0) - compiler.js:79 childCompiler.runAsChild [front-operation]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/lib/compi ler.js:79:16
本人用vue-cli做工程，webpack升級到4.x，想要使用html-loader。
主要的原因有：file-loader,url-loader版本太低，無法匹配最新的html-loader，並且html-loader的配置方式也更改了，需要對應更改。比如本人使用了cdn，靜態資源都保存到cdn，
"html-loader": "^1.0.0",
"file-loader": "^6.0.0",
"url-loader": "^4.0.0",
// module.rules中代碼片段 { test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]'), publicPath: 'https://cdn1.xxx.com/static/' } }, { test: /\.html$/, loader: 'html-loader', options: { attributes: { root: path.resolve(__dirname, '../src'),// html中引用時直接使用"/assets/img/xxx.ico"這樣子 list: [ { tag: 'img', attribute: 'src', type: 'src' },{ tag: 'link', attribute: 'href', type: 'src' } ] } } } // html代碼片段 <!DOCTYPE html> <html> <head> ... <link rel="shortcut icon" href="/assets/img/favicon.ico"> ... </head> ... </html>
ERROR in Error: Parse Error: <link rel="shortcut icon" href=data:image/vnd.microsoft.ic on;base64,AAABAAEAICAAAAEAIACoEAAAFg
比較明顯，圖片打成base64，但是標簽的屬性的雙引號被去掉了導致的。有文檔說是HtmlWebpackPlugin配置中的removeAttributeQuotes屬性控制導致的
new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', minify: { ... removeAttributeQuotes: false, // 之前是true，改為false就行 }, ... }),
改了之后其他的屬性都加上了，但是就是這個base64沒有加上，問題依然存在。如果不使用minify的話還可以，問題在於使用minify會解析html，一解析就報錯。所以這算是一個bug吧，我提了一個單：https://github.com/jantimon/html-webpack-plugin/issues/1368
目前有兩個方案，一個是”minify:false“，要么就url-loader配置不進行base64。
file-loader升級過度導致element-ui圖標不展示
"webpack": "^4.41.5",
"html-loader": "^1.0.0",
"file-loader": "^4.0.0",
"element-ui": "^2.13.0",
file-loader 5.x以上就會出現這個問題，后面本人使用4.x
UglifyJs Unexpected token: keyword «const»
網絡上最多的是說：UglifyJs當前的版本不支持es6，升級uglifyjs或者使用babel-loader。實際上本人的項目之前使用uglifyjs+babel-loader好好的，只是將公共代碼提取為一個新倉庫后，通過npm的git方式引入才導致的問題。
最后找到了關鍵：https://segmentfault.com/q/1010000020987202/里面的回答
問題就公共庫沒有進行babel-loader轉換。
解決方案：公共庫配置打包，進行babel-loader+uglifyJs編譯，編譯后的庫作為第三方包使用
第三方包可能沒有進行babel編譯
babel編譯是很慢的，所以正常情況配置都會加上include或exclude。很有可能你添加的第三方包沒有進行babel編譯。導致引入后在部分瀏覽器上報錯。
比如highlight.js就沒有進行babel編譯，箭頭函數“=>”在IE上不識別，可能報：Error:Loading chunk 10 failed.
實際上就是解析拉取下來的異步js時報錯了。需要配置將其進行babel編譯
// webpack.common.js { test: /\.js$/, include: [ path.resolve(__dirname, '../src'), path.resolve(__dirname, '../node_modules/highlight.js'), ], use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } },
Error: html-webpack-plugin could not minify the generated output
bug單： https://github.com/webpack-contrib/html-loader/issues/306
錯誤的代碼和配置
// webpack.conf.js
{
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]'),
publicPath: publicPath
}
}, {
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true, //這是默認值
attributes: {
root: path.resolve(__dirname, '../src'),
list: [
{
tag: 'link',
attribute: 'href',
type: 'src'
}
]
}
}
}
// index.html
<head> ... <link rel="shortcut icon" href="/assets/img/favicon.ico"> </head>
使用了url-loader對favicon.ico做base64嵌入文件。但是嵌入后html-loader處理時，將link的href屬性的雙引號給搞沒了，導致報錯
ERROR in Error: html-webpack-plugin could not minify the generated output. In production mode the html minifcation is enabled by default. If you are not generating a valid html output please disable it manually. You can do so by adding the following setting to your HtmlWebpackPlugin config : | | minify: false | See https://github.com/jantimon/html-webpack-plugin#options for details. For parser dedicated bugs please create an issue here: https://danielruf.github.io/html-minifier-terser/ Parse Error: <link rel="shortcut icon" href=data:image/vnd.microsoft.icon;base 64,AAABAAEAICAAAAEAIACo...........AA AH/jgBx/5+D+f//E////7//8=> <title>標題</title>.....</body> </html> - htmlparser.js:244 new HTMLParser [front-newpy-operation]/[html-minifier-terser]/src/htmlparser.js:244:13 ...... - index.js:247 Promise.all.then.then [front-newpy-operation]/[html-webpack-plugin]/index.js:247:25
然后將html-loader的配置改為
{
test: /\.html$/, loader: 'html-loader', options: { minimize: { caseSensitive: true, collapseWhitespace: true, conservativeCollapse: true, keepClosingSlash: true, minifyCSS: true, minifyJS: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }, attributes: { root: path.resolve(__dirname, '../src'), list: [ { tag: 'link', attribute: 'href', type: 'src' } ] } } }
居然就好使了。無語，所以本人提了一個單