source-map

Reads: 974 Edit

1 webpack.config.js

/*
   HMR : hot module replacement 热模块替换 / 模块热替换
    作用 : 一个模块发生变化,只会重新打包这一个模块,而不是打包所有的模块
    极大提升代码构建速度

    css文件: 可以使用HMR功能
    js 文件: 默认不适用HMR功能, 需要修改js代码,添加支持HMR功能代码
    html 文件 : 默认不适用HMR功能, 同时会导致问题 html没有热更新
      
 */

//引用Node.js中的path模块,处理文件路径的小工具
const path = require("path");
//引入插件
const HtmlwebpackPlugin = require("html-webpack-plugin")

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: "development" ,
    //入口
     //入口模块文件路径
    entry:  "./src/js/index.js"  ,
    //出口是对象
    output: {
        //path是一个绝对路径,__dirname 是当前js的绝对路径
        path: path.join(__dirname , "./dist/"), //打包的结果文件存储目录
        filename : "bundle.js"  //打包的结果文件名
    },module:{ //模块
          rules: [  // 规则
            {
                test  : /\.css$/ , //正则表达式,匹配 .css 文件资源
                use: [
                    "style-loader",
                    "css-loader"
                ]
             }  ,
             {
                test  : /\.(png|svg|jpg|gif)$/ , //正则表达式,匹配 .css 文件资源
                use: [
                    "file-loader"                    
                ]
             }   
          ]
    },
    //配置插件
    plugins: [
        new HtmlwebpackPlugin({
            //此插件作用是将 index.html打包到bundle.js所在目录中
            //同时会在 index.html中自动的在<script>引入 bundle.js
            template : "./src/index.html"
        })
    ] ,
    // 实时重新加载
    devServer: {
        contentBase: "./dist" ,
        compress: true,
        port: 8888,
        open: true,
        //开启HMR功能 ,修改 webpack.config.js配置,需要重新启动服务 ctrl +C 停止服务
        hot: true  
    },devtool: "source-map"
}

/**
 source-map 一种提供源代码到构建后代码的映射技术
     inline-source-map   内联
        1. 只生成一个source-map
     hidden-source-map   外部
     eval-source-map
        每一个都生成对应的source-map

 */

运行 npm run build 会发现 dist多了一个 bundle.js.map

把devtool 对应的值改为 inline-source-map , hidden-source-map ,eval-source-map等值。

使 print.js故意出错

console.log('print.js 被加载');

function print(){
    const content = 'hello webpack 222';
    console.log(content)();
}

export default print;

关于作者

王硕,网名信平,十多年软件开发经验,业余架构师,精通Java/Python/Go等,喜欢研究技术,著有《PyQt 5 快速开发与实战》《Python 3.* 全栈开发》,多个业余开源项目托管在GitHub上,欢迎微博交流。


Comments

Make a comment

www.ultrapower.com ,王硕的博客,专注于研究互联网产品和技术,提供中文精品教程。 本网站与其它任何公司及/或商标无任何形式关联或合作。