未捕获的SyntaxError:无效或意外的标记bundle.js:formatted:1
未捕获的SyntaxError:无效或意外的标记bundle.js:formatted:1
提问于 2020-06-23 11:39:26
当使用brotli压缩算法为我的反应网络应用程序，我得到这个错误在两个浏览器铬和莫兹拉.All文件是正确地生成由brotli.It减少我的网络应用程序大小从600kb到139kb，但我不知道为什么它不能正常工作我的webpack
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const outputDirectory = "dist";
const BrotliGzipPlugin = require('brotli-gzip-webpack-plugin')
const webpack = require("webpack");
module.exports = {
entry: ["babel-polyfill", "./website/client/src/index.js"],
output: {
path: path.join(__dirname, outputDirectory),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
}
]
},
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: "http://localhost:4000"
})
},
plugins: [
new BrotliGzipPlugin({
asset: '[path].br[query]',
algorithm: 'brotli',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
quality: 11
}),
new BrotliGzipPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
quality:11
}),
new CleanWebpackPlugin({
clearAfterEveryBuildPatterns: [outputDirectory]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
favicon: "./public/favicon.ico"
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
]
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>xyz</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" type="text/css">
<body>
<div id="root"></div>
<div id="preloader"></div>
<a href="#" class="back-to-top"><i class="fas fa-arrow-up"></i></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" async integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" async integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js" ></script>
</body>
</html>
express服务器配置我已经根据不同的浏览器设置了请求编码头
app.get("/bundle.js", (req, res) => {
if (req.header("Accept-Encoding").includes("br")) {
console.log("calling brotli");
res.set("Content-Encoding: br");
res.set("Content-Type", "application/javascript");
res.sendFile(path.join(__dirname, "..","..","dist","bundle.js.br"))
} else if (req.header("Accept-Encoding").includes("gz")) {
console.log("Calling gzip");
res.set("Content-Encoding: gzip");
res.set("Content-Type", "application/javascript");
res.sendFile(path.join( __dirname, "..","..","dist", "bundle.js.gz"));
} else {
console.log("Calling Uncompressed");
res.sendFile(path.join( __dirname, "..","..","dist", "bundle.js"));
}
});
回答 1
Stack Overflow用户
发布于 2020-06-23 12:32:57
将我的输出配置更改为多种类型的bundle.js输出
webpack.config.js
output: {
path: path.join(__dirname, outputDirectory),
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
},
现在，它可以很好地工作，可以参考https://github.com/webpack/docs/wiki/configuration#entry
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62526948
复制相关文章
相似问题
腾讯云开发者
