“webpack”技术之入口（entry）

一,webpack的概念：

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图 ，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的项目内容。从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着 高度的可配置性，可以很好满足你的需求。(说白了，因为咱们的不同静态资源放在不同的模块下，当用户使用咱们的网页时，当需要不同的静态资源时，浏览器会不断的向后台发送请求以此来获取这些静态资源，那么如果我们把这些静态资源打包在一个模块中进行调用的时候，会极大的方便我们向用户展示我们的内容！)

二，入口：

 1.基本概念：入口起点（entry point）指示webpack应该使用哪个模块来作为构建它的内部依赖图的开始。当进入入口之后，weboack会找出有哪些模块和库是入口起点（直接或者间接）依赖的。

2.属性配置以及相关语法:在webpack配置中有多种方式定义entry属性.

  单个入口（简写）语法:

   用法：entry: string | [string]

首先我们建立一个入口文件，起名字叫做：webpack.config,js(因为官网中是这样写的，我的英语水平真的很菜，所以照搬一下).我们就在这个js文件上面来写我们的入口函数，告诉我们的webpack从哪个入口文件进入.

 module.exports = {

 entery: '' ./src/entey.js";//这里的src文件夹下面就存放我们的入口文件

};

下面是简写：

module.exports = {

entry: {

      main: './path/to/my/entry/files.js';

            },

}；

我们也可以将一个文件路径数组传递给 entry 属性，这将创建一个所谓的 "multi-main entry"。在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 "chunk" 中时，这种方式就很有用。

module.exports = {

  entery:[ './src/file_1/js' , './src/file_2.js'],

  output:  {

         filename : 'bundle.js',//给打包好的文件起一个名字.

       },

};   

总的来说吧，当我们希望通过一个入口为应用程序或者工具来快速设置webpack配置的时候，那么运用单一入口方法显然是不错的，可是大家可以看出来的是，这种语法方式用来扩展或者调整配置的灵活性显然不大.

那么接下来咱们来学习更高级的对象语法:

用法：entry: { <entryChunkName> string | [string] } | {}//这里引用原文档

module.exports = {

    entry:{

               app: './src/app.js',

               adminApp : './src/addminApp.js',

    },

}

可以看出对象语法会比较繁琐.然而，这是应用程序中定义入口的最可扩展（关于可扩展我的理解就是咱的配置可以重复使用，并且和其他配置可以结合使用）.

注意:当你通过插件生成入口的时候，可以传递空的对象{}给entry!

描述入口的对象

  用于描述入口的对象.你可以使用如下属性：

    

• dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。

• filename: 指定要输出的文件名称。

• import: 启动时需加载的模块。

• library: 指定 library 选项，为当前 entry 构建一个 library。

• runtime: 运行时 chunk （块）的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。

• publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。

     module.exports = {

            entry:  { 

             no1: ' entey.js' ,//当前入口所依赖的入口的的文件名,

             no2: {

                           dependOn : 'no1',

                           import: ' ./src/app.js',//启动时需要加载的模块

                   },

            

  },

}

因为webpack这一块的坑比较多,所以对上面描述入口的对象的一些使用注意点我就引用官网文档上的内容了。

module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b',
    },
  },
};

在这里面的话，可以看到runtime 和 dependOn在同一个入口上，然而runtime 和 dependOn 不应在同一个入口上同时使用，所以如下配置无效。

还有runtime 不能指向已存在的入口名称，例如下面配置会抛出一个错误：

module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

其实这个问题只是讲配置你运行chunk的名字，如果你指向已经存在的入口的话。那么他会将原先的入口覆盖掉.

还有一个非常，，，无语的问题吧：

module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
};

这里的dependOn不能循环引用,这个很好想通，如果这样写的话那么我们就会在a3和b3里面来回的找入口文件所依赖的文件，a3和b3来相互甩锅.....

下面列出一些常见的应用场景：

    入口配置

多页面应用程序

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};

   我们告诉 webpack 需要三个独立分离的依赖图

   那么为什么要分离呢？在多页面应用程序中，server 会拉取一个新的 HTML 文档给你的客户端。页面重新加载此新文档，并且资源被重新下载，由于入口起点数量的增多，多页应用能够复用多个入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

 Tips:根据经验：每个 HTML 文档只使用一个入口起点。

好吧，今天就写写到这里，其实好久都没写博客了，一个暑假我都没有咋学习，因为参加了十四运的演职人员，所以我的js基础以及之前的nodejs学习的有那种飘飘的感觉，所以希望大家可以静下心来把html.css以及js的基础打好，这个是非常重要的，最后以上是我边学边做的东西，希望有大佬可以指出我的错误或者理解浅显的地方！希望所有喜欢前端的伙计一起进步！下面给大家写一段我昨天写的关于webpack初体验的代码：

/*

webpack.config.js webpack的配置文件

 作用：指示webpack 干那些活（当你运行 webpack 指令时，会加载里面的配置）

 所有构建工具都是基于nodejs平台运行的~模块化默认采用common.js

*/

//resolve用来拼接绝对路径的方法

var path = require("path");

module.exports = {

    mode: 'production',

  //webpack的配置

  //入口起点

  entry: "./src/index.js",

  //输出

  output: {

    //输出文件名

    filename: "built.js",

    //输出路径

    //_diename nodejs的变量，代表当前文件的目录;

    path: path.resolve(__dirname, "build"),

  },

  //lodader配置

  module: {

    rules: [

      //详细loader配置

      {

        //匹配那些文件

        test: /\.css$/,

        use: [

          //创建style标签，将js中的样式资源插进行，添加到head中生效

          "style-loader",

          //将css文件变成commonjs模块加载js中，里面内容是字符样式.

          "css-loader",

        ],

      },

    ],

  },

  //plugins配置

  plugins: [

    //详细的plugins配置

  ],

  //mode:'development'//这里面使用开发环境有助于我们观察我们代码打包后的样子以及我们的调试.

};

下一期会给大家讲述几个我个人觉得挺“浪漫的”css特效吧，可以写给自己的女朋友.