webpack开发工具

高璐发布于2019-04-23 13:12 / 2831人阅读

摘要：用来调试打包后的代码现在在浏览器打开最终生成的文件，点击按钮，并且在控制台查看显示的错误。错误应该如下我们可以看到，此错误包含有发生错误的文件和行号的引用。这是非常有帮助的，因为现在我们知道了，所要解决的问题的确切位置。

source map

用来调试打包后的代码

  const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const CleanWebpackPlugin = require("clean-webpack-plugin");

  module.exports = {
    entry: {
      app: "./src/index.js",
      print: "./src/print.js"
    },
+   devtool: "inline-source-map",
    plugins: [
      new CleanWebpackPlugin(["dist"]),
      new HtmlWebpackPlugin({
        title: "Development"
      })
    ],
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    }
  };
 现在在浏览器打开最终生成的 index.html 文件，点击按钮，并且在控制台查看显示的错误。错误应该如下： 
   Uncaught ReferenceError: cosnole is not defined
    at HTMLButtonElement.printMe (print.js:2)
 我们可以看到，此错误包含有发生错误的文件（print.js）和行号（2）的引用。这是非常有帮助的，因为现在我们知道了，所要解决的问题的确切位置。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1560.html

webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0
基于webpack构建的angular 1.x 工程（一）webpack篇

摘要：基于构建的工程一篇现在都已经出到的版本了，可我对它的认识还是停留在的版本。然后是写启动的命令行，也就是上面的这样写的意思是，当你输入你的命令名字就会让执行你对应命令的语句。我们首先把基本的配置引进来。基于webpack构建的angular 1.x 工程（一）webpack篇现在AngularJS都已经出到4.x的版本了，可我对它的认识还是停留在1.x的版本。之前用它是为...

Anleb 2019-08-21 17:23 评论0 收藏0
webpack多页应用架构系列（七）：开发环境、生产环境傻傻分不清楚？

摘要：开发环境和生产环境都拥有的配置，但在细节上有所不同，比如说，又比如说中的和参数。更重要的是，实际上开发环境和生产环境的配置文件的绝大部分都是一致的，对于这一致的部分来说，我们坚决要消除冗余，否则后续维护起来不仅麻烦，而且还容易出错。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/11900...

paulquei 2019-08-20 11:09 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（四）

摘要：在前后端分离的前端项目开发中经常用到。是的一个中间件。即是一个重要的功能。配置先来在配置文件中引入添加一个和通信的客户端添加应用入口文件在插件中引入在我们的开发环境中是这样配置的。原文链接此文是我同事写的，搭建Express结合Webpack。以下是正文，后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实...

StonePanda 2019-08-20 12:03 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（四）

摘要：在前后端分离的前端项目开发中经常用到。是的一个中间件。即是一个重要的功能。配置先来在配置文件中引入添加一个和通信的客户端添加应用入口文件在插件中引入在我们的开发环境中是这样配置的。原文链接此文是我同事写的，搭建Express结合Webpack。以下是正文，后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实...

animabear 2019-08-01 15:54 评论0 收藏0
什么是 Webpack？【Webpack Book 翻译】

摘要：资源哈希编码使用可以为每个包的名称注入一个哈希值例如，，以便在版本更新后使客户端上旧版本的包无效重新下载。如此受人喜爱的原因之一是热模块更换。可以为文件名生成哈希值，在内容更改时，可以作废浏览器缓存中上个版本的包。原文链接：https://survivejs.com/webpack...翻译计划：https://segmentfault.com/a/11... 涉及到的未翻译单词 ...

tainzhi 2019-08-23 10:59 评论0 收藏0