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配置成功

  • 相关阅读:
    并发编程2(并发编程1已记录完毕,可去前面文章翻找)
    服务器启动django项目
    大四实习期间公司遇到的一些知识点
    列表推导式、生成器表达式
    brewhome基本使用
    python float的四舍五入
    爬取狮城bbs困扰了我一天的Python基础题
    python pip安装模块失败的原因
    stringutil stringutils
    echars的使用
  • 原文地址:https://www.cnblogs.com/uimeigui/p/13916894.html
Copyright © 2011-2022 走看看