标签:fine 种类型 模块化 watch 声明 异步 权限 生成 ejs
Webpack 是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。通过 loader 转换,任何形式的资源都可以当做模块,比如 CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS 等;
前端开发和其他开发工作的主要区别,首先是前端基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器的,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来一直探索的难题。
<script src="module1.js"></scirpt> <script src="module2.js"></scirpt> <script src="module3.js"></scirpt> <script src="module4.js"></scirpt>
这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的调用都是一个作用域。
这种原始的加载方式暴露了一些显而易见的弊端:
服务器端的 NodeJS 遵循 CommonsJS 规范,该规范核心思想是允许模块通过 require 方法来同步加载所需依赖的其它模块,然后通过 exports 或 module.exports 来导出需要暴露的接口。
require("module"); require("../module.js"); export.doStuff = function() {}; module.exports = someValue;
优点:
缺点:
实现:
Asynchronous Module Definition 规范其实主要一个主要接口 define(id?, dependencies?, factory); 它要在声明模块的时候指定所有的依赖 dependencies,并且还要当做形参传到 factory 中,对于依赖的模块提前执行。
define("module", ["dep1", "dep2"], function(d1, d2) { return someExportedValue; }); require(["module", "../file.js"], function(module, file) {});
优点:
缺点:
实现:
Commons Module Definition 规范和 AMD 很相似,尽量保持简单,并与 CommonsJS 和 NodeJS 的 Modules 规范保持了很大的兼容性。
define(function(require, exports, module) { var $ = require("jquery"); var Spinning = require("./spinning"); exports.doSomething = ...; module.exports = ...; });
优点:
缺点:
实现:
EcmaScript6 标准增加了 JavaScript 语言层面的模块体系定义。 ES6 模块的设计思想,是尽量静态化,使编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonsJS 和 AMD 模块,都只能在运行时确定这些东西。
import "jquery"; export function doStuff() {} module "localModule" {}
优点:
缺点:
实现:
大家期望的模块系统:可以兼容多种模块风格,尽量可以利用已有的代码,不仅仅只是 JavaScript 模块化,还有 CSS、图片、字体等资源也需要模块化。
WebPack 是一款模块加载器兼打包工具,它能把各种资源,如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
npm install webpack -g
npm install webpack-cli -g
测试是否成功:cmd下运行以下两个命令
webpack -v
webpack-cli -v
//暴露一个方法:sayHi exports.sayHi = function () { document.write("<div>Hello WebPack</div>"); };
//require 导入一个模块,就可以调用这个模块中的方法了 var hello = require("./hello"); hello.sayHi();
module.exports = { entry: "./modules/main.js", output: { filename: "./js/bundle.js" } };
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="dist/js/bundle.js"></script> </body> </html>
说明:
执行命令webpack不会实时监听你的js文件是否变化再重新打包生成新的文件,而webpack --watch是实时监听变化,一点修改js文件就会重新打包
# 参数 --watch 用于监听变化
webpack --watch
module.exports = { entry: "", output: { path: "", filename: "" }, module: { loaders: [ {test: /\.js$/, loader: ""} ] }, plugins: {}, resolve: {}, watch: true }
标签:fine 种类型 模块化 watch 声明 异步 权限 生成 ejs
原文地址:https://www.cnblogs.com/zhihaospace/p/12079894.html