2017年Webpack前端工程化实践.pdf

1、i5tingWebpack前端工程化原理与实践2017依赖管理 npm,bower压缩 uglifyjs,jsmin，csso模块系统 CommonJs,AMD,ES6 ModulesCSS预处理 PostCSS、less、sass资源处理 DataURLjs友好语言 coffee,babel，typescript模块加载器 require.js,jspm，sea，system.js图片压缩 imagemin构建工具 grunt,gulp,make模板引擎 jade,handlebars，nunjucks模块打包器 browserify,webpack前端=钱端目录1Webpack的前世今生3

2、Q/A2前端工程化Webpack的前世今生理解演进过程依赖下载下载某个库或插件 下载它的依赖，以及依赖的依赖 无穷尽依赖管理npm/bowerNPMNode.js内置，你值得拥有 在package.json里存储包的描述信息和依赖 npm init:创建package.json配置文件 npm install jquery-save:安装并保存到package.json npm install:安装在package.json里的所有依赖脚本加载windowiframeeval$.getScript()该有模块系统了使用标准的模块系统来处理依赖和导出 每个文件是一个模块 使用模块加载器或打包器进

3、行处理AMD,CommonJS,ES6 ModulesCOMMONJSrequire(.):Loads module,returns exports require(./helpers.js):.by relative path,returns exports require(jquery):.from dependencies manager folder exports or module.exports export objectmodule exports require globalAsynchronous Module DefinitionCommonJS 中逐渐分裂出了 AMD，

4、专门用于浏览器的 因为浏览器没有io读写apihttps:/ module and bind exported variables into scope.import abc from.:Bind abc to the default export.import abc from.:Bind abc to the named export abc.import xyz as abc from.:Bind abc to the named export xyz.import*as abc from.:Bind abc to a object with all exports.import.:Lo

5、ads module only for side-effects.:-|System.import(.):Loads a module async,returns a Promise to all exports import./helper.js and import jquery Resolving not specified Everyone assumes the same as CommonJs以前使用多个标签加载 手动管理顺序 手动管理加载哪些runs in the browser and loads modules when they are requested easy to

6、use less optimized for production usageruns in preparation and bundles modules into static files needs a preparation/build step more optimized for production usage开发环境产品环境module loadermodule bundlergrunt/gulprequire.js systemjsr.jsbrowserify webpackjspm所有资源都是模块Entry-options：初始化配置Compile：开始编译make：分析入