官方默认的是用 ‘#cheap-module-eval-source-map’ devtool:'#cheap-module-eval-source-map' 设置好之后,在vue项目调试的时候,代码里面标注debugger的时候就能看到对应的代码了,非常方便。 或者,直接找到对应的文件。在chrome用 ’ctrl(command) + p‘,输入文件名,可以找到对应的源代码。 打断点: 需要注意的是...
cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。 eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap,但是对打包后输出的JS文件的执行...
cheap有两种作用: 一是将错误只定位到行,不定位到列。 二是映射业务代码,不映射loader和第三方库等。 会提升打包构建的速度。 module会映射loader和第三方库 用eval的方式生成映射关系代码,效率和性能最佳。但是当代码复杂时,提示信息可能不精确。 source-map会生成map格式的文件,里面包含映射关系的代码 2.线上环境...
module.exports = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // cheap-module-eval-source-map is faster for development devtool: '#cheap-module-eval-source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev...
constpath=require('path');module.exports={mode:'development',devtool:'cheap-module-eval-source-map',// sourcemap配置entry:{main:'./src/index.js'},output:{filename:'[name].js',path:path.resolve(__dirname,'dist')}} devtool的相关文档在https://webpack.js.org/configuration/devtool/ ...
开发环境推荐:cheap-module-eval-source-map 生产环境推荐:cheap-module-source-map 原因如下: cheap:源代码中的列信息是没有任何作用,因此我们打包后的文件不希望包含列相关信息,只有行信息能建立打包前后的依赖关系。因此不管是开发环境或生产环境,我们都希望添加 cheap 的基本类型来忽略打包前后的列信息; ...
'source-map' : 'cheap-module-eval-source-map', // 配置source-map module: { rules: [ // 处理图片资源 { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, // 处理字体资源 { test: /\.(woff|woff2|eot|ttf|otf)$/, use:...
"source-map" : "cheap-module-eval-source-map", entry: [ require.resolve(`webpack-dev-server/client`), path.resolve(__dirname, "./src/main.js") ].filter(Boolean), output: { path: path.resolve(__dirname, "./dist"), publicPath: "/dist/" }, resolve: { alias: { // this isn'...
( ' ./webpack.common.js ');const devConfig = {mode: 'development',devtool: 'cheap-module-eval-source-map ' ,devServer: icontentBase: './dist',open: true,port: 8080,hot: true3,plugins:[new webpack.HotModuleReplacementPlugin(],optimization: {usedExports: true}}module.exports = merge(...
// vue.config.jsmodule.exports={configureWebpack:{devtool:'source-map'}} 其中,devtool选项指定了生成.map文件的方式,'source-map'表示生成独立的.map文件。其他可选值包括'cheap-source-map'、'eval-source-map'等,具体说明请参考Webpack 官方文档。