zoukankan      html  css  js  c++  java
  • webpack(5) -开发环境

    使用 source map (仅用于开发环境)

    当 webpack 打包源代码时,可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如,如果将三个源文件(a.jsb.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件,所以这种提示这通常不会提供太多帮助。

    为了更容易地追踪 error 和 warning,JavaScript 提供了 source map 功能,可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js,source map 就会明确的告诉你。

    //webpack.config.js 配置文件中加入
    devtool: 'inline-source-map'

    选择一个开发工具

    1. webpack watch mode(webpack 观察模式)

      • 指示 webpack "watch" 依赖图中所有文件的更改。如果其中一个文件被更新,代码将被重新编译,所以你不必再去手动运行整个构建。
      • //在package.json中
        "scripts": { "test": "echo "Error: no test specified" && exit 1", "watch": "webpack --watch", "build": "webpack" },

        然后运行 npm run watch  ,当你改变一个文件时候,代码就会自动重新编译

      • 缺点:需要手动刷新浏览器获取最新的结果
    2. webpack-dev-server   (用的最多)

      • 提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能
      • npm install --save-dev webpack-dev-server
        //在webpack.config.js中加入 
        //配置告知 webpack-dev-server,将 dist 目录下的文件 serve 到 localhost:8080 下。(译注:serve,将资源作为 server 的可访问文件)
        //webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中,然后将它们 serve 到 server 中,就好像它们是挂载在 server 根路径上的真实文件一样
        devServer: { contentBase:
        './dist' },
         //在package.json中添加 npm scripts
        "scripts": { "test": "echo "Error: no test specified" && exit 1", "watch": "webpack --watch", "start": "webpack-dev-server --open", "build": "webpack" },

        然后运行 npm start (不要加run),这时候会自动在浏览器中打开页面,然后修改任何资源保存,web server 将在编译代码后自动重新加载(浏览器会自动更新,无需手动刷新)

      • webpack-dev-server 在编译之后不会写入到任何输出文件,即dist文件夹中是空的,没有任何文件!!!

      3、webpack-dev-middleware  详见官网:https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-source-map

  • 相关阅读:
    mysql查找有某列但没有此列索引的表
    mysql找到所有索引
    mysq在某一刻同时获取主从库的位置点
    新书《深入应用C++11:代码优化与工程级应用》出版,感谢支持
    c++11实现一个简单的lexical_cast
    应该用bind+function取代虚函数吗?
    《深入应用C++11:代码优化与工程级应用》开始发售
    一个更好的C++序列化/反序列化库Kapok
    C++技术沙龙主要内容
    C++11模版元编程
  • 原文地址:https://www.cnblogs.com/emma-post/p/10772541.html
Copyright © 2011-2022 走看看