关于 webpack 你所忽略的细节(附源码分析)
注:本篇不是入门教程,入门请直接查看官方文档。本篇的主要目标是通过实际问题来介绍 webpack 中容易被人忽略的细节, 以及源码分析( 以最新发布的 release 版本1.14.0的源码为例 ), 并且提供几种解决方案。 随着前端技术的火热发展,工程化,模块化和组件化的思想已逐步成为主流,与之相应的,就需要有一整套工具流可以支撑起它。 现在比较热门的前端资源模块化管理和打包工具应该非 Webpack 莫属了。 Webpack 是什么 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 —引自 Webpack 中文指南 使用举例 我们来看一下官方文档中的最小用例,新建并写入以下内容到这两个文件: cats.js var cats = [ 'dave' , 'henry' , 'martha' ]; module .exports = cats; app.js (Entry Point) cats = require ( './cats.js' ); console .log(cats); 这个时候,就可以使用