learn-webpack

learn-webpack copied to clipboard

webpack基本使用配置[入门篇]

2

### webpack是什么 webpack是一个前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。还可以结合gulp使用，不冲突。 ### webpack优势 - 模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案； - 模块化规范支持全面，AMD/CommonJS一应具全； - 插件机制完善，实现本身实现同样模块化，容易扩展； - Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。 ###...

lengziyu

插件可以完成更多 loader 不能完成的功能，插件的使用一般是在 webpack 的配置信息 plugins 选项中指定，Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。 ``` plugins: [ //your plugins list ] ```

lengziyu

require cdn 这样会报错： ``` var jquery = require("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"); ``` 解决方法： ``` var $script = require("scriptjs"); $script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() { $('body').html('It works!') }); ```

lengziyu

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：

lengziyu

### 介绍loader webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。 loader机制的存在让webpack拥有了无限的可能性，让webpack几乎可以容纳一切前端需要的资源。同时合理得利用loader也有助于我们在架构项目的时候省去很多重复工作。 ### loader特性 - Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript； -...

lengziyu