入门webpack（三）webpack之entry和output

直入正题，四个核心概念并结合实例

entry: 打包入口
output：打包出口
loaders
plugins：使用的插件

entry

告诉webpack使用哪个文件作为构建依赖图的起点，比如指定app.js作为entry，webpack会分析app.js使用到的模块，并解析模块中使用到的模块以此类推，最终将前端静态资源按一定规则打包成一个或多个静态文件。

多个entry

一个项目可能有多个入口，首先多页面程序可能有多个entry，SPA应用也可能有多个入口（框架代码一个entry，业务代码一个entry）

entry的值

可以是字符串 || 数组 || 对象无论采用何种方式，entry都是入口的文件路径。

// webpack.conf.js
module.exports = {
    // entry: './app.js'  //字符串
    //entry: ['./app.js',  './index.js']  数组形式
    // 推荐对象格式 更加清晰和灵活
    entry: {
        index : './index.js',
        app: './app.js'
    }

}

output

一个模块化开发项目开发完成后到上线前，一般需要借助webpack打包生成dist目录，比如我们使用vue-cli工具执行npm run build后会在项目的主目录下生成dist目录（如果不了解vue-cli没关系，暂时知道这个事实即可），那么这个dist目录以及打包后的文件名就是借助vue-cli已经内置好的webpack配置文件，指定了dist目录，和打包后生成的文件名。

简单来说，output就是告诉webpack通过入口entry按照模块依赖关系将打包好后的文件输出到哪里（指定文件夹或位置）以及文件名（打包后的文件bundles叫什么）。
最后线上环境会使用打包好的文件。

const config = {
    entry: {
        app: './xx/app.js' // 入口文件路径 并不一定是'./app.js'
    },
    output: {
        path: '/home/xx',   // 绝对路径
        // filename: 'bundle.js'
        filename: '[name].[hash:7].js' //采用hash动态生成文件名

    }
}

上面说了entry,output两个webpack核心概念，下面让我们进行一些demo练习加深理解。

首先你需要安装node.js 和webpack 命令行工具采用git bash 你也可以使用你喜欢的命令行工具。

如何安装上述工具请参考官网或者其他教程。

webpack打包有三种方式

借助命令行工具
配置文件
第三方脚手架

demo

step1

打开git bash -> $mkdir webpack-demo -> cd webpack-demo

step 2
这里我们验证webpack打包ES6 Modules
用你喜欢的编辑器打开webpack-demo文件夹，新建multi.js

// multi.js
export default (x, y) => x * y

新建app.js

import multi  from './multi'

console.log('multi(3, 4) = ' + multi(3,4))

gitbash 输入 webpack app.js bundle.js

这里写图片描述

操作界面上可以看到打包成功后的chunk （代码块）接近3kb，现在webpack-demo下新建一个index.html文件，将bundle.js引入

<script src="./bundle.js"></script>

浏览器中打开html文件，在控制台可以看到

这里写图片描述

至此我们这次打包成功了。

现在我们来分析这次简单的打包，简单项目的打包盒复杂项目的打包本质上是一样的，现在我们分析简单的。

这次打包用到了两个模块 app.js multi.js 命令行打包时指定了entry: app.js, 和output: 'bundle.js'

这里写图片描述

打包后的bundle.js为2.96kb，比两个单独模块加起来还多了将近1kb，可能会有疑问，既然打包会使体积变大，那么为什么还要打包呢。

我们前面提到了模块化开发，实际项目中，以vue开发为例，为了代码复用和便于维护，我们会将项目中的组件分为基础组件和业务组件，各个组件都用到的js逻辑抽象为单独的js模块以提供给各个组件使用。这样可以将复杂的项目分为细小的模块，如果某个业务组件用到了基础组件和js逻辑只需要在该业务组件中引入基础组件和js模块即可。也节省了代码量和便于维护。但是这样的项目如果不打包浏览器目前是不支持的，只有打包后浏览器才能正确解析。
那么你可能会问，那么为什么还模块化开发呢？
首先为了避免重复造轮子，直接使用已经有的东西，如果不采取这种方式，你需要自己用代码在项目中实现已经有的东西，而实现这些已经有的轮子你不仅会花费时间和精力，也会是代码变得更加复杂，有时实现轮子本身的代码就很复杂，这样一比较可能代码量更大，而且不好维护。实际上一个真实项目打包后体积会大大缩小，还可以借助webpack的plugins对代码进行压缩，这样打包后的代码就更少了。这和我们上面的demo是不一样的。

上面我们打包了ES6 module，那么接下来我们来看webpack打包CommonJS实现的模块。

webpack-demo文件夹下新建arraySum.js来计算一个数组元素中Number类型的元素之和。

// arraySum.js
module.exports = (arr) => {
  let sum = 0
  if (!Array.isArray(arr)) {
    return
  }
  for (let i = 0; i < arr.length; i++ ) {
    if (typeof(arr[i]) === 'number' ) {
      sum += arr[i]
    }
  }
  return sum
}

// app.js
let arrSum = require('./arraySum')
console.log('[1, 2, "3", 4]中数值的和是' + arrSum([1, 2, "3", 4]))

// git bash 执行

webpack app.js bundle.js

html文件引入打包后的bundle.js在控制台可以看到
这里写图片描述

对Common JS定义的模块打包成功。对既有ES Modules和CommonJS同时打包可以自行验证。

上面的打包没有指定配置文件，接下来我们通过指定配置文件来完成打包这样的工作。

webpack-demo 下新建webpack.conf.js

// webpack.conf.js
module.exports = {
  entry: {
    app: './app'
  },
  output: {
    filename: '[name].[hash:7].js'
  }
}

girt bash 执行 webpack --config webpack.conf.js
可以看到当前目录下生成了app.49062ad.js文件，数字字母字符串是随机生成的，通过改变[hash:number]中number的值可以改变文件名长度。

在index.html文件引入app.49062ad.js 文件在控制台可以看到

这里写图片描述

需要了解的是文件名不同，命令行执行1命令也不同

配置文件名： webpack.config.js ---> webpack.config.js

配置文件名： webpack.conf.js ---> webpack --config webpack.conf.js

如果不想用hash来生成随机文件名，也可以指定输出文件名如bundle.js

指定路径path

上面的demo中output没有指定文件路径,会在当前文件夹下输出打包后的文件下面指定文件路径。

// webpack.conf.js

const path = require('path')   //不可少
module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/dist'
    }
}

打包后可以看到在当前目录下生成dist目录，dist文件夹下存放打包后的文件app.bundle.js

关于output需要注意的一点是，如果entry有多个入口起点，但输出配置只能有一个，也就是说配置文件中只能有一个output对象，不能为多个入口起点分别配置output.

总结，这一节我们简单的介绍了entry和output，以及如何打包js模块。更多详细内容可以参考官网地址
入口起点(Entry Points)
输出(Output)