webpack打包后引用cdn的js_Webpack的简单讲解

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

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

例如&＃xff0c;我们举个栗子&＃xff1a;

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

打包的代码块如下所示&＃xff1a;

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

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

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

接下来&＃xff0c;我们尝试再本地构建一份webpack。

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

2&＃xff0c;npm install webpack&＃xff0c;下载webpack依赖到node_modules中。

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

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

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

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

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