webpack4.29.x成神之路(十二) source-map
栏目: JavaScript · 发布时间: 5年前
内容简介:上节:babel编译es6上节目录如下:
上节:babel编译es6
上节目录如下:
使用webpack编译后的代码运行在浏览器上,一旦出错,错误指向的是编译后的代码,这对调试带来极大困难,所以webpack自带devtool选项来解决这一问题。
修改webpack.config.js:
// 省略 module.exports = { mode: 'production', entry: './src/index.js', output: { filename: '[name].js', path: resolve(__dirname, 'bundles') }, // 开启devServer devServer: {}, // 开启调试 devtool: 'source-map', module: { rules: [{ test: /\.(gif|jpg|jpeg|png|svg)$/, use: ['url-loader'] }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] }] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new CleanWebpackPlugin() ] };
然后npm run build,查看bundles文件夹:
.
- source-map则会将错误指向源文件。
- source-map会为每个js都生成一个对应的.map文件
- 默认会提示错误代码的精确位置(某文件的某行某列),
- 会映射入口文件及其引入的其它依赖
修改选项:
// 省略 devtool: 'cheap-source-map', //省略
然后npm run build,查看bundles文件夹,也会为每个js都生成一个对应的.map文件,
区别是: 加上cheap前缀就只会提示到某行,并且只管入口文件,
如果用了cheap前缀,又想映射其它依赖,需要在加上module(cheap-module-source-map)
再改选项:
// 省略 devtool: 'inline-source-map', //省略
这时再打包就不会生成.map文件了,因为已经内联到对应的js文件中去了。
devtool选项很多,并且可以相互配合,这里给出大众推荐:
开发环境:cheap-module-eval-source-map
生产环境:cheap-module-source-map
下节:摇树优化(tree shaking)(待更新)
以上所述就是小编给大家介绍的《webpack4.29.x成神之路(十二) source-map》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
SSA:用户搜索心理与行为分析
[美] 罗森菲尔德(Louis Rosenfeld) / 汤海、蔡复青 / 清华大学出版社 / 2014-4-1 / 59.00
何为站内搜索分析(SSA)?它如何帮助你挖掘用户搜索曰志,从中洞悉用户搜索心理和行为,从而有针对性地改善用户体验,提升网站价值?这些都可以从《SSA:用户搜索心理与行为分析》中找到答案。《SSA:用户搜索心理与行为分析》首先通过故事来说明SSA是如何使Vanguard集团起死回生的,简要介绍SSA并指导读者动手实践。其次,通过丰富的实例来介绍很多工具和方法,帮助读者着手分析用户查询数据,从中获得更......一起来看看 《SSA:用户搜索心理与行为分析》 这本书的介绍吧!