entry和context——webpack第二篇

前言

配置webpack的环节中，entry是必不可少的一个环节，我最近作了一篇关于webpack的分享，而后也想作一个关于webpack的一个系列，讲讲我对于webpack的理解，以及我对于咱们工程架构的理解。有兴趣的也能够关注一下个人github，能够点个关注，喜欢或者收藏谢了0.0

entry和context——是什么

在能有什么用以前，然咱们前去了解一下他们两个究竟是什么，其实entry和context从英文层面上咱们就能够清晰的知道，一个是入口的意思，还有一个是上下文的意思，那么咱们想知道他们到底有什么用，请看下面。

context

关于context的demo

其实这个目录结构是这样的，有兴趣的能够去看一下这个小demo，是这个上下文的示意。

文件的目录结构

目录中的dist是我打包出来的文件，而app中的文件是我书写的原文件，而webpack.config.js中的代码是这样的

const path = require('path');

module.exports = {
    context: path.resolve(__dirname, 'app'),
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}复制代码

看这段代码，其实咱们就能够猜到context的做用了，若是没有这个context，那咱们的entry应该怎么写，是否是应该书写成

'./app/main.js'复制代码

还好我app中就一个main.js，要是来10个或者100个，那要多写多少个app，因此咱们能够看到context的做用。他就是会将entry的根路口指向app这个文件夹

entry

讲完context，那么咱们应该要来说讲什么呢，固然是entry入口文件啦，对于一个webpack打包配置文件来讲，entry是咱们最初配置的时候就该解决的问题。

对于entry这个配置项来讲，咱们能够把他分类型来看，entry一共能够分为string、array和object。其余的都是这几种的组合。

string

对于字符串，其实这是一个单一的入口，是一个一对一或者一对多的关系，在如今的单页应用SPA上面用的不少，咱们能够来看一下咱们的demo。

在demo中咱们的目录结构是这样的

目录结构

咱们能够看一下webpack.config.js中的代码：

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}复制代码

这是个一对一的关系，一个入口，产出一个bundle.js，因此这个是举个例子，比较简单，可是在真实的单页应用中，不会这么简单，他会是一个一对多的关系，一个入口，而后webpack会解析依赖而后将其打包多个文件。

array

讲完字符串咱们来说讲数组是个什么关系呢，数组实际上是多对一的关系，就是入口能够是多个文件，可是出口会是一个模块，这个能够用在哪里呢，好比，咱们项目中确定会有不少公用的模块，那么这些模块有必要打包到不少个文件中么，答案固然是没有这个必要的，放一个里面，咱们只要在html中引入一个就好了，多省事，还会用在这种状况上，好比jquery和lodash这样的不相互依赖的文件能够放到一个模块中。那咱们来看看具体的demo

在demo中咱们的目录结构是这样的

目录结构

咱们能够看一下webpack.config.js中的代码：

module.exports = {
    entry: ['./main1.js', './main2.js'],
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}复制代码

到这里咱们能够打开index.html文件看一下，是否是main1.js和main2.js中的两条代码都在bundle.js中了，因此，这个多对一的关系能够很好的用到真实的项目中。

object

最后一个对象，不用说你们应该也猜获得，固然是多对多的关系。也是在多页面应用中咱们常常用到的，我这里举一个简单点的例子，具体的demo

在demo中咱们的目录结构是这样的

目录结构

咱们能够看一下webpack.config.js中的代码：

module.exports = {
    entry: {
        one: './main1.js',
        two: './main2.js',
        'path/to/main': './main3.js'
    },
    output: {
        path: __dirname,
        filename: '[name].js'
    }
}复制代码

咱们能够看到，前两个entry对象的键值对仍是比较正常的，但第三个的时候我却把它换成了一个路径名，可是webpack很聪明，看到目录结构你就知道，其实webpack会解析这个路径，而后他会帮咱们建立相对应的路径，好比，path文件夹中有to文件夹，在to文件夹中还有main.js。

可是在实际的项目中，entry确定不会变的这么简单，我能够给你们提供几个例子，关于entry对象的收集，由于若是是数组和字符串，在单页应用中算简单的，可是在多页面应用中倒是困难重重。

实际项目中的entry

待收集资源的目录结构

收集entry对象的函数

const glob = require('glob')
const path = require('path')

const GLOB_FILE_PATH = './src/pages/**/index.js'
const CUT_PATH = './src/pages/'

exports.getEntries = function(argv){
    let  paths = glob.sync(GLOB_FILE_PATH)
    let  entries = {}
    for (let i = 0; i < paths.length; i++){
        let pathName = path.dirname(paths[i]).replace(new RegExp('^' + CUT_PATH), '')
        entries[pathName] = paths[i]
    }
    return entries
}复制代码

这里用正则来提取的键值对，有兴趣的同窗也能够去了解一下glob这个文件读取模块。

总结

这算是个人第二篇webpack的文章，也是但愿能给我我的的webpack系列文章有一个很好的开始，写写你们的支持，我会将webpack的配置项一个一个拿出来说，而后配上demo这样但愿能让你们更好的理解，这期讲了比较简单点的context和entry。下期将会带来output，但愿喜欢的能够去个人github上面点个star，文章属于纯原创，转载请注明出处谢谢