webpack 多页配置

webpack可以配置单页应用, 也可以配置多页应用。

区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个

webpack配置:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: "development",
  entry: {
    home: './src/home.index',
    about: './src/about.js'
  },
  output: {
    // 多个入口的文件不能打包的一个文件中, 应该用name区别。这样就会输出 home.js和about.js
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'page home',
      template: './index.html', // 模版文件
      filename: 'index.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      title: 'page about',
      template: './index.html', // 模版文件
      filename: 'index.html',
      chunks: ['about']
    })
  ]
}

以上代码, HtmlWebpackPlugin 实例话了两次, 每次都会生成一个html,所谓的多页。并且选项中的, chunks的设置主要让每个index.html分别引用它自己的js文件。

webpack devtool

此选项控制是否生成,以及如何生成 source map。

source-map

源码映射, 会单独生成一个sourcemap文件, 出错了,会标识当前报错的列和行, 大而全,并且是相互独立的。
source-map 是所有选项中最慢和最高质量的选择,但这对于生产建设来说是很好的

eval-source-map

不会产生单独的文件, 但是可以显示列和行。和source-map的主要区别是不会产生文件

cheap-module-source-map

简化后的 source-map, 不会产生列, 但是是一个单独的map文件,产生后你可以保留起来,用于调试

cheap-module-eval-source-map

不会生成map文件,不会显示列,可以定位到错误的行

webpack配置

module.exports = {
  devtool: "source-map"
}

总结:

开发环境推荐使用:

  • eval :每个模块使用eval()和//@ sourceURL执行。这是非常快。主要缺点是,它没有正确显示行号,因为它被映射到转换代码而不是原始代码(没有来自加载器的源映射)。

  • eval-source-map:每个模块使用eval()执行,而SourceMap作为DataUrl添加到eval()中。最初它是缓慢的,但是它提供快速的重建速度和产生真实的文件。行号被正确映射,因为它被映射到原始代码。它产生了最优质的开发资源。

  • cheap-eval-source-map:与eval-source-map类似,每个模块都使用eval()执行。它没有列映射,它只映射行号。它忽略了来自加载器的源代码,并且只显示与eval devtool相似的经过转换的代码。

  • cheap-module-eval-source-map:类似于cheap-eval-source-map,在本例中,来自加载器的源映射被处理以获得更好的结果。然而,加载器源映射被简化为每一行的单个映射。

生产环境推荐使用

  • (none) :(省略devtool选项)-不触发SourceMap。这是一个很好的选择。

  • source-map:一个完整的SourceMap是作为一个单独的文件。它为bundle 添加了引用注释,因此开发工具知道在哪里找到它。

  • hidden-source-map:与source-map相同,但不向bundle 添加引用注释。如果您只希望SourceMaps从错误报告中映射错误堆栈跟踪,但不想为浏览器开发工具暴露您的SourceMap,可以使用此选项。

参考文章: webpack之devtool

笔记地址

Webpack4 学习笔记六 多页面配置和devtool的更多相关文章

  1. Spring Boot 学习笔记(六) 整合 RESTful 参数传递

    Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...

  2. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  3. thinkphp学习笔记4—眼花缭乱的配置

    原文:thinkphp学习笔记4-眼花缭乱的配置 1.配置类别 ThinkPHP提供了灵活的全局配置功能,ThinkPHP会依次加载管理配置>项目配置>调试配置>分组配置>扩展 ...

  4. golang学习笔记8 beego参数配置 打包linux命令

    golang学习笔记8 beego参数配置 打包linux命令 参数配置 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/docs/mvc/contro ...

  5. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

  6. Redis学习笔记六:持久化实验(AOF,RDB)

    作者:Grey 原文地址:Redis学习笔记六:持久化实验(AOF,RDB) Redis几种持久化方案介绍和对比 AOF方式:https://blog.csdn.net/ctwctw/article/ ...

  7. openresty 学习笔记六:使用session库

    openresty 学习笔记六:使用session库 lua-resty-session 是一个面向 OpenResty 的安全和灵活的 session 库,它实现了 Secure Cookie Pr ...

  8. 【swift学习笔记】二.页面转跳数据回传

    上一篇我们介绍了页面转跳:[swift学习笔记]一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据加上了"回传"两个字 ...

  9. PHP学习笔记----IIS7下安装配置php环境

    原文:PHP学习笔记----IIS7下安装配置php环境 Php如何安装 Php版本的选择 Php在windows下的(php5.4.7)有两种版本: VC9 x86 Non Thread Safe ...

随机推荐

  1. javaEE环境搭建-eclipse

    1.       javaEE环境搭建: (1)     JDK1.8 (2)     eclipse-JavaEE (3)     tomcat-7.0.90 下载地址: https://tomca ...

  2. javaweb九大个内置对象,四大域

    9个内置对象如下: 1.session对象:会话对象 当客户端第一次访问服务器的页面时,web服务器会自动为该客户端创建一个session对象并分配一个唯一的id号 常常用它来在多个页面间共享数据,如 ...

  3. [MySQL] - MySQL连接字符串总结

    来源:http://blog.sina.com.cn/s/blog_5f0dab1e0100e4pv.html?retcode=0 一.MySQL Connector/ODBC 2.50 (MyODB ...

  4. Python3.4 获取百度网页源码并保存在本地文件中

    最近学习python 版本 3.4 抓取网页源码并且保存在本地文件中 import urllib.request url='http://www.baidu.com' #上面的url一定要写明确,如果 ...

  5. OLEDB事务

    学过数据的人一般都知道事务的重要性,事务是一种对数据源的一系列更新进行分组或者批处理以便当所有更新都成功时同时提交更新,或者任意一个更新失败时进行回滚将数据库中的数据回滚到执行批处理中的所有操作之前的 ...

  6. JS基础学习——闭包

    JS基础学习--闭包 什么是闭包 闭包的定义如下,它的意思是闭包使得函数可以记住和访问它的词法范围,即使函数是在它声明的词法范围外执行.更简单来讲,函数为了自己能够正确执行,它对自己的词法范围产生闭包 ...

  7. 使用angular帮你实现拖拽

    拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> ...

  8. phpmyadmin-错误:配置文件权限错误,不应任何用户都能修改!这里有答案

    今天在linux下使用phpMyadmin的时候突然出现这个红色警告.差点把我吓晕在电脑前.不过冷静想一下这个报错,肯定就是linux权限那几个 ‘7’ 惹的祸. 于是 通过命令  ‘ll’ (这是英 ...

  9. Elipse plugin or Bundle & OSGI

    Develop and register service, lookup and use service! Android Design on service's publish-find-bind ...

  10. Resharper F12下载dll源码

    原作者:赵青青 原文链接:Visual Studio(VS) F12 查看DLL源代码 Dot Peek 今天在调试时,又有这个需求,想查看dll的源代码,我决定从dot peek这个程序入手去查找相 ...