自己配的webpack 下载ol之后解析报错，应该如何解决
in ./node_modules/ol/structs/LRUCache.js
Module parse failed: Unexpected token (229:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| peek(key) {
> return this.entries_[key]?.value_;
| }
|
webpack配置如下
const path = require("path");
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 定义压缩文件类型
const productionGzipExtensions = ["js", "css"];
const webpack = require("webpack");
function resolve(dir) {
return path.join(__dirname, dir);
}
console.log(process.env.VUE_APP_SERVER_API);
module.exports = {
publicPath: "/", // 根路径
// 输出文件路径，默认为dist
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
//assetsDir: 'static',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
// indexPath: '',
// 保存时 lint 代码
lintOnSave: process.env.NODE_ENV === "development",
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
chainWebpack: (config) => {
// 忽略的打包文件
config.externals({
axios: "axios",
});
const entry = config.entry("app");
entry.add("babel-polyfill").end();
entry.add("classlist-polyfill").end();
},
css: {
// 忽略 CSS order 顺序警告
extract: { ignoreOrder: true },
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
//引用全局css文件
data: `@import "@/styles/var.scss";`,
},
},
},
configureWebpack: (config) => {
config.resolve.alias["@"] = resolve("src");
config.performance = {
hints: "warning",
//入口起点的最大体积 整数类型（以字节为单位）
maxEntrypointSize: 50000000,
//生成文件的最大体积 整数类型（以字节为单位 300k）
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith(".js");
},
};
config.plugins.push(
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
})
);
if (process.env.NODE_ENV === "production") {
// 生产环境
// 编译时删除console.log
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
// 配置productionGzip-高级的方式
// 配置参数详解
// asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
// algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
// test： 所有匹配该正则的资源都会被处理。默认值是全部资源。
// threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
// minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true, // 删除原文件
})
);
} else {
// 开发环境
}
},
chainWebpack(config) {
config.plugins.delete("preload"); // TODO: need test
config.plugins.delete("prefetch"); // TODO: need test
// set svg-sprite-loader
config.module.rule("svg").exclude.add(resolve("src/icons")).end();
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
})
.end();
// set preserveWhitespace
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap((options) => {
options.compilerOptions.preserveWhitespace = true;
return options;
})
.end();
// https://webpack.js.org/configuration/devtool/#development
config.when(process.env.NODE_ENV === "development", (config) =>
config.devtool("cheap-source-map")
);
},
devServer: {
disableHostCheck: true,
port: 8090, // 配置端口
open: false, // 自动开启浏览器
compress: true, // 开启压缩
overlay: {
warnings: false,
errors: true,
},
// 设置请求代理
proxy: {
"/": {
target: process.env.VUE_APP_SERVER_API,
ws: false, // 需要websocket 开启
pathRewrite: {
"^/": "/",
},
},
},
},
};
