js文件引用 webpack_Webpack的简单讲解

自前端模块化以来，webpack和babel逐渐成为前端开发者的标配。Babel主要将es6或者ES7的语法进行转移。webpack则起到前端模块化打包的功能。

本质上来讲，webpack是现代javascript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序的时候，它会递归的构建一个依赖关系，其中就包含了应用程序需要的每个模块，然后将所有这些模块打包成一个bundle或者多个bundle(按需加载)。

例如，我们举个栗子：

如上图所示，entry是入口文件，引用了utils1.js和utils2.js。而utils1.js又调用了utils2.js

打包的代码块如下所示：

/******/ ([
/* 0 */		//模块id
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);		//require资源文件id
    __webpack_require__(2);

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
	//util1.js文件
    __webpack_require__(2);
    var util1=1;
    exports.util1=util1;

/***/ },
/* 2 */
/***/ function(module, exports) {
	//util2.js文件
    var util2=1;
    exports.util2=util2;

/***/ }
...
...
/******/ ]);

bundle.js是以模块id为记号，通过函数把各个文件依赖封装达到分割的效果，以上代码id为0表示entry需要的依赖，1表示utils1需要的依赖。

require资源文件id表示该文件需要加载的各个模块，如_webpack_require__(1)表示 需要加载util1.js 模块。

简单的说，webpack打包后会形成一个立即执行的函数，而各个模块则会成为这个立即执行函数的参数。主函数通过模块的唯一id来对这行参数进行调用。

接下来，我们尝试再本地构建一份webpack。

1，上文已经说过，webpack其实是基于node的打包应用。那么，我们就可以通过npm init构建一个node应用，生成package.json文件。

2，npm install webpack，下载webpack依赖到node_modules中。

3，手动生成webpack.config.js文件。这个文件主要配置webpack的入口，出口文件，以及loader转化，babel转化用的。

module.exports={
    entry:'./index.js',
    output:{
        filename:'./test.js'
    }
}

如此简单的一个配置就 可以对index.js进行打包了，打包后的文件输出到test.js中。

由于webpack4以后将webpack-cli拆分了出来，所以，直接输入webpack命令并不会执行，全局安装webpack-cli或者再运行node_modules中的webpack可以启动打包程序。

4，再webpack中还可以配置许多loader（css-loader）,plugin,babel等操作。比如webpack.config.js中有个resolve配置项，这个是配置webpack模块规则用的。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
    }
  },

alias配置项是别名的意思。用@指向src文件夹以后，我们引入模块就可以‘@XXX’来代替复杂的‘../’文件引用了。