上节: 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。