webpack之entry和output

最近在学习webpack的相关知识,无奈学了就忘,遂在此做一个简单的记录,以便来日遗忘之时,可以回顾。

一.entry

webpack的entry有两种写法(好像还有一种是函数?这里就写两种把)。第一种是字符串,第二种是数组。
直接看例子:

let base1='./app/index2.js'

let base2={
    index: "./app/index.js",
    index1: "./app/index1.js"
}

module.exports={
    entry: base2,   //base1
    output: {
        path: __dirname+'/dist',   //path为输出路径,__dirname为根目录
        filename: "_[name].js"
    }
}

当以数组向entry传参数的时候,output得到的文件名字为_index.js和_index1.js,传入数组的情况通常用在有多个页面的情况下每个页面都要有一个压缩的js,此时就需要用到数组传递参数;
而当以字符串向entry传参数的时候,output得到的文件名字为_main.js(在不指定filename的情况下,此为默认值)。

webpack-entry官方中文文档传送门

二.output

output用来配置压缩后的文件名字和文件目录,直接看例子吧:

let base={
    index: './app/index.js',
    index1: './app/index1.js'
}

module.exports={
    entry: base,
    output: {
        path: __dirname+'./dist',
        //hashDigestLength: 4,
        filename: "[chunkhash:4]_[name].js"
    },
}
  • [chunkhash] 和 [hash]
    [chunkhash:4]表示输出一个由字母和数字组成的4位的字符串,所以最后得到的结果可能是abc1_index.js、def2_.index1.js
    hashDigestLength: 4是另一种写法
    若filename指定[hash]_[name]则会输出abc1_index.js和abc1_index1.js这两个文件的hash值是相同的
    这是为什么呢?hash时webpack在整个编译过程中产生的一个值,而chunkhash指的是webpack在对每一个文件(这里指index1.js和index.js)编译过程,这两个的chunkhash是不同的
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,729评论 7 110
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,358评论 0 5
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,268评论 7 35
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,938评论 31 98
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,540评论 2 71