webpack笔记三：使用 source map 以及开发环境的配置

gnehc 发布于2019-08-22 16:08 / 1510人阅读

摘要：二使用开发工具为你提供了一个简单的服务器，并且能够实时重新加载。启用后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自的错误或警告在控制台不可见。在执行命令时打开浏览器，也可以指定特定的浏览器。

首先配置好简单的开发环境：

npm init -y
cnpm install webpack webpack-cli -D

目录如下：

一、在webpack中使用source map

在实际开发过程中，我们在使用webpack打包的时候，打包完成的bundle.js报错信息是很难Debug的，这时候就需要Source Map来还原真实的出错位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中a.js包含一个错误，那么堆栈跟踪就会指向到 a.js。那么我们在webpack.config.js 配置

然后我们在src目录下增加a.js, b.js 和 c.js 文件，然后在c.js里这样写：

console.error("出错了！");

接着运行npm run build打开index.html，查看控制台会发现：

会明确地看到出错的位置。

二、使用开发工具 webpack-dev-server

webpack-dev-server为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。首先让我们执行 cnpm install webpack-dev-server -D 命令，然后修改webpack.config.js文件：

devServer:{
    publicPath: "/dist/",
    contentBase: "./",
    host: "127.0.0.1",
    port: 8080,
    quiet: true,
    open: true
}

我们可以对devServer进行相关配置配置详见官方文档，下面介绍一些简单的配置：

devServer.publicPath

此路径下的打包文件可在浏览器中访问。假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。

devServer.contentBase

告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。

devServer.host

指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，可以指定host: "0.0.0.0"

devServer.port

指定要监听请求的端口号。

devServer.quiet

启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。

devServer.open

在执行命令时打开浏览器，也可以指定特定的浏览器。

devServer.headers

在所有响应中添加头部内容：

headers: {
  "X-Custom-Foo": "bar"
}

另附上github项目练习地址：https://github.com/zgf123/web...

云服务器 GPU云服务器 source-map java开发环境的配置 linux系统如何配置java系统的开发环境 map集合的使用

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

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

webpack@4.32.2研究笔记【03】- devtool

摘要：简介选项用于控制是否需要生成，以及如何生成。表示把每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加文件名，并使用执行。通过来处理已有的。优点是不需要建立和部署内网的服务器，缺点是无法直接线上源码。简介 devtool选项用于控制是否需要生成source map，以及如何生成source map。源码地址什么是source map？ source ma...

wangtdgoodluck 2019-08-23 18:01 评论0 收藏0
webpack4搭建Vue开发环境笔记~~持续更新

摘要：项目地址一知识获取当前文件所在路径，等同于把一个路径或路径片段的序列解析为一个绝对路径给定的路径的序列是从右往左被处理的，后面每个被依次解析，直到构造完成一个绝对路径如果处理完全部给定的片段后还未生成一个绝对路径，则当前工作目录会被用上生成项目git地址一、node知识 __dirname: 获取当前文件所在路径，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 评论0 收藏0
webpack 项目构建：（三）开发环境——本地服务器搭建

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

tolerious 2019-08-22 15:10 评论0 收藏0
webpack4系列教程（九）：开发环境和生产环境

摘要：它允许在运行时更新各种模块，而无需进行完全刷新。构建生产环境开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的具有实时重新加载或热模块替换能力的和。 1. 构建开发环境如果你一直跟随我前面的博文，那么你对webpack的基础知识已经有比较深刻的理解了。之前，我们一直执行着： npm run build 来打包编译输出我们的代码，本文我们来看看如何构建一个开发环境，...

姘存按 2019-08-23 14:48 评论0 收藏0
vue-cli#4.7项目结构分析

摘要：前言使用过进行项目开发的同学，一定知道或者使用过脚手架，他能够很好的搭建项目结构和工程，让我们能够把足够的精力放在业务开发上。对象提供一系列属性，用于返回系统信息返回当前进程的命令行参数数组。前言使用过 vue 进行项目开发的同学，一定知道或者使用过 vue-cli 脚手架，他能够很好的搭建项目结构和工程，让我们能够把足够的精力放在业务开发上。也正是因为这样，很多时候我们会因为项目...

EastWoodYang 2019-08-22 17:09 评论0 收藏0