专栏首页vue学习7、webpack从0到1-entry、output、sourcemap

7、webpack从0到1-entry、output、sourcemap

简单说下entry、output,然后了解下sourcemap,这个东西还是比较重要。 git仓库:webpack-demo

1、entry与output

  • 对于入口entry我们常见的其实是简写模式,我们可以使用键值对的形式来定义它,其实默认是这样的。
module.exports = {
  ...
  // 简写
  entry: "./src/index.js",
  
  // 默认
  entry: {
    "main": "./src/index.js",
  }
  ...
}
  • 输出outputfilename就是打包后指定的文件名,path就是存放的位置。还有一些其他的输出名称更改的几个点:
    • [name]就是entry里面的key键名
    • [hash]就是一段hash值,这个还是挺常见的。
const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    "app": "./src/index.js",
  },
  output: {
-   filename: 'bundle.js',
+   filename: '[name].bundle.[hash].js',
    path: path.resolve(__dirname, "dist")
  }
}
  • 最后我们打包就会生成一个长成这样的文件:app.bundle.ee39eb0347a038bf0d2f.js

2、多页面相关

  • 一般来说,我们在写多页面应用的时候,可能有指定的多个入口文件,这个时候就需要分开打包了,而不是把所有的文件打包为一个。比如说在我们项目中要把header.jscontent.jsfooter.js的打包为三个文件。
const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    "header": "./src/header.js",
    "content": "./src/content.js",
    "footer": "./src/footer.js",
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, "dist")
  }
}
  • 打包完以后,我们就会生成三个文件,如果把这三个文件作为三个不同的入口文件,分别引入各个index.html中,这就是写多页面的基础思路吧。

3、关于sourceMap

  • 回到开始的状态,在我们的开发过程中啊,当我们打包的时候,我们会把几个模块的文件打包为一个main.js输出出去,这个时候,如果某个js文件出了错,那么在浏览器中指出的这个错误位置是跟main.js相关联的,这对我们找出错误毫无意义。
  • 比如,我们在src/header.js中打印一行错误。然后要去webpack.config.js中把mode: "development"这行代码注释掉,因为开发模式下,默认是开启了sourcemap的。
export function createHeader() {
+ console.error('这是一行错误')
  const div = document.createElement("div");
  div.innerText = "头部块";
  div.classList.add("header");
  document.body.appendChild(div);
}
  • 打包后浏览器中打开,打印出的信息对于我们找出错误并没有什么卵用。

4、使用sourceMap

  • sourceMap就是解决这个问题的,当浏览器抛出错误的时候可以帮我们定位到具体的js文件和行列位置。
  • webpack中开启sourceMap是个很简单的事情:
  module.exports = {
    mode: 'development',
    // 开启sourceMap
+   devtool: 'inline-source-map',
    entry: {
      main: "./src/index.js"
    },
    output: {
      publicPath:'/',
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    }
    ...
  };
  • ok,那devtool: 'inline-source-map'inline-source-map是个啥意思,我这里简单扯两句。
    • 首先呢,你可以设置这个键值为source-map,这样打包就会生成一个.map的映射文件。
    • inline-source-map就是会把这个.map文件直接作为DataUrl插入到main.bundle.js中。
    • 还有很多键值可以配置,总之就是会对打包效率什么的有一些影响,具体看这里:devtool
  • 当我们在webpack.config.js中设置完sourcemap以后,打包刷新浏览器我们就可以看到打印信息变为这样,就可以很明确的帮我们定位到问题。

5、小结

  • sorcemap做了些什么事情呢?打包后会生成一个.map的映射文件,它会将你打包后的代码映射到源代码中,与之相关关联。这样,我们就知道在源代码中出错的位置是几行几列了。
  • 配置sorcemap有很多的可选值,但是不用管这么多,开发模式中我们设置为inline-source-map或者source-map,生产模式中我们将其设置为cheap-module-source-map即可,react和vue都是这么设置的。作为一名新手,模仿是最有效的学习方式了。
  • entry算是比较简单,但是output今天文章中提及的只是冰山一角,后面根据需求再设置,下面参考链接也可以去详细了解下它的一些配置项。

参考链接: webpack-output webpack-entry webpack-devtool

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 11、webpack从0到1-CodeSplitting代码分割

    Ewall
  • webpack入门

    前言:这两天在网上找了些视频和资料学习webpack,最后发现官网上的教程原来就写得很好,只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程,然后总结...

    Ewall
  • 5、webpack从0到1-处理css文件

    Ewall
  • 那些前端常用的网站插件

    这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

    企鹅号小编
  • Webpack入门

    Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。

    张子阳
  • 腾讯云独家详解小程序多人视频通话

    在微信小程序中搜索 腾讯视频云 可以加载到我们的演示用小程序,其中 多人音视频 功能可用于体验和测试多人音视频通话功能。出于 UI 美观和画面大小的考虑,Dem...

    腾讯视频云终端团队
  • 对于零基础同学来讲,javascript有多难掌握?

    你是零基础,那么你用什么方式,可以快速的实现js的运用自如呢? Javascript是一门脚本语言,它没有复杂的内存管理,只有一个进程,变量随便什么都可以储存...

    web前端教室
  • error: unable to unlink old 'antzb-web/src/main/webapp/js/ny-details.js': Invalid argument

    git -c diff.mnemonicprefix=false -c core.quotepath=false checkout – antzb-web/sr...

    qubianzhong
  • Fiddler 使用fiddler发送捕获的请求及模拟服务器返回

    本例的一个目的是,根据服务器返回js脚本名称,有选择的让浏览器执行本地的js脚本文件。

    授客
  • JavaScript常用对象&属性&事件-图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛

扫码关注云+社区

领取腾讯云代金券