9、webpack开发--出现错误如何定位到源文件

※项目使用前文webpack清理输出的内容一节建立的项目

1、修改print.js 文件

export default function print() {
    console.error('code find a error!');
}

2、构建工程并运行

npm run build

3、运行效果如下：

 

这里只能看到发生了错误，并且是发生在编译后的app.bundle.js文件中，并不能正确定位发生错我的源文件。

4、更改webpack.config.js中的配置，将构建方式启用source map，一边跟踪错误

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    devtool: 'inline-source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '输出管理'
        }),
        new CleanWebpackPlugin()
    ]
}

5、重新构建工程并运行

npm run build

6、运行效果如下，这样就可以将问题定位到具体源文件以及错误行了！