zoukankan      html  css  js  c++  java
  • 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 id="root"></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配置成功

  • 相关阅读:
    条件变量:为什么要与互斥锁配套使用?为什么要使用while来避免虚假唤醒?
    【转】高性能IO之Reactor模式
    LeetCode127:单词接龙
    CF1245F: Daniel and Spring Cleaning
    权值线段树学习笔记
    luogu_4317: 花神的数论题
    luogu_2605: 基站选址
    入门平衡树: Treap
    CF1244C: The Football Season
    luogu_1156: 垃圾陷阱
  • 原文地址:https://www.cnblogs.com/uimeigui/p/13916894.html
Copyright © 2011-2022 走看看