问题
今天我在开启的时候发现 vuecli3 打包时开启了 productionSourceMap 为 true 却没有生成 sourcemap 文件？
我的 vue.config.js 的配置如下：
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/kaimo/" : "/kaimo", // 将构建好的文件输出到哪里 outputDir: "kaimo", pages: { index: { entry: "src/main.js", template: "src/tpl.html", filename: "index.html", title: "测试页面", chunks: ["chunk-vendors", "chunk-common", "index"] }, }, // 生产环境下的sourceMap productionSourceMap: true, chainWebpack: config => { if (process.env.NODE_ENV === "production") { config.externals({ "vue": "Vue", "vue-router": "VueRouter" }); } }, configureWebpack: config => { if (process.env.NODE_ENV === "production") { config.optimization.minimizer = [ new UglifyJsPlugin({ uglifyOptions: { output: { comments: true, // 删除注释 }, warnings: false, compress: { drop_console: true, drop_debugger: true, // 删除debugger pure_funcs: ["console.log"], } } }) ]; } } };
设置 productionSourceMap: true 打包之后：并没有发现生成 sourcemap 文件
原因以及解决方式
定位导致的问题，我把一些优化的配置注释掉
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/kaimo/" : "/kaimo", // 将构建好的文件输出到哪里 outputDir: "kaimo", pages: { index: { entry: "src/main.js", template: "src/tpl.html", filename: "index.html", title: "测试页面", chunks: ["chunk-vendors", "chunk-common", "index"] }, }, // 生产环境下的sourceMap productionSourceMap: true, chainWebpack: config => { if (process.env.NODE_ENV === "production") { config.externals({ "vue": "Vue", "vue-router": "VueRouter" }); } }, configureWebpack: config => { if (process.env.NODE_ENV === "production") { // config.optimization.minimizer = [ // new UglifyJsPlugin({ // uglifyOptions: { // output: { // comments: true, // 删除注释 // }, // warnings: false, // compress: { // drop_console: true, // drop_debugger: true, // 删除debugger // pure_funcs: ["console.log"], // } // } // }) // ]; } } };
注释之后，打包发现生成了
所以导致生成不了的原因就是 uglifyjs-webpack-plugin 插件导致，这里我用的是 "uglifyjs-webpack-plugin": "^2.2.0", 如果我们需要使用 uglifyjs-webpack-plugin 优化代码，那么怎么解决这个问题？
我们可以打开 https://www.npmjs.com/package/uglifyjs-webpack-plugin，找到 sourceMap 配置项，可以看到这个默认是 false 的，如果要生成就需要开启。
所以我们开启 uglifyjs-webpack-plugin 插件的 sourceMap 配置项为 true。
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/kaimo/" : "/kaimo", // 将构建好的文件输出到哪里 outputDir: "kaimo", pages: { index: { entry: "src/main.js", template: "src/tpl.html", filename: "index.html", title: "测试页面", chunks: ["chunk-vendors", "chunk-common", "index"] }, }, // 生产环境下的sourceMap productionSourceMap: true, chainWebpack: config => { if (process.env.NODE_ENV === "production") { config.externals({ "vue": "Vue", "vue-router": "VueRouter" }); } }, configureWebpack: config => { if (process.env.NODE_ENV === "production") { config.optimization.minimizer = [ new UglifyJsPlugin({ sourceMap: true, uglifyOptions: { output: { comments: true, // 删除注释 }, warnings: false, compress: { drop_console: true, drop_debugger: true, // 删除debugger pure_funcs: ["console.log"], } } }) ]; } } };
这样我们就能正常生成了sourcemap文件了。
