webpack sourcemap文件生成配置，及项目dist目录自动清理

1、安装项目需要文件

yarn add webpack webpack-cli html-webpack-plugin clean-webpack-plugin  

2、项目配置如下

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //clean-webpack-plugin,清理dist目录方便我们查看生成后的source-map
const path = require('path')
module.exports = {
    entry: {
        main: './src/main.js'  //根据目录,在src下新建main.js
    },
    devtool: 'cheap-module-source-map',  //cheap指的是只显示具体文件具体行，不用显示具体列，module指的是引入文件也生成map文件，source-map指的是生成map，
    //有inline指的是以base64的格式打包souce-map到dist下生成的main.js文件中，eval代码通过eval执行，不能正常显示行数
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({ template: './src/public/index.html' }) //在src/public目录下新建html文件,body内容为<div ></div> }) 
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

3、main.js内容如下

let dom=document.querySelector('#root')
let text=document.createElement('div')
console.log(dom)
text.innerText='我是新创建的html2'
dom.appendChild(text)

4、package.json中配置命令

"scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
  },

5、yarn build,打开浏览器查看效果，可以看见main.js中的打印指向文件具体位置，source-map配置成功