码迷,mamicode.com
首页 > Web开发 > 详细

Webpack中的sourceMap配置

时间:2019-08-26 15:10:56      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:报错信息   而且   webpack   ports   包含   develop   浏览器   部分   evel   

---------------------------------------webpack.config.js----------------------------------------------------------
module.exports = {

mode:‘development‘,

// 开发环境 development
// devtool:‘cheap-module-eval-source-map‘,

// 生产环境 production
// devtool:‘cheap-module-source-map‘,


devtool:‘cheap-module-eval-source-map‘,
entry: {
main: ‘./src/index.js‘
},
output: {
filename: ‘[name].js‘,
path: path.resolve(__dirname,‘dist‘)
},
plugins:[new HtmlWebpackPlugin({
template:‘src/index.html‘
}),new CleanWebpackPlugin([‘dist‘])],
module: {
rules: [
{
test: /\.jpg$/, //这个配置是重点
use: {
loader:"file-loader",
options:{
name:‘[name].[ext]‘, //打包出来的图片名字和后缀都和之前的一样,
outputPath:"images/" //打包出来的文件存放在dist/images文件夹中
}
}
},

]
}
};
------------------注释--------------------------
  • eval:使用 eval 方式可大幅提高持续构建效率

  • source-map: 产生.map文件

  • cheap: 使用 cheap 模式可以大幅提高 souremap 生成的效率。大部分情况我们调试并不关心列信息,而且就算 sourcemap 没有列,有些浏览器引擎(例如 v8) 也会给出列信息 (如报错信息只用给出在哪一行就可以,需要给出第几列错误)

  • module: 包含loader的sourcemap(

  • inline: 将.map作为DataURI嵌入,不单独生成.map文件(这个配置项比较少见)

Webpack中的sourceMap配置

标签:报错信息   而且   webpack   ports   包含   develop   浏览器   部分   evel   

原文地址:https://www.cnblogs.com/hellosxs/p/11412152.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!