webpack之webpack loaders
Loaders
webpack默认只能处理js文件，其他文件都需要交给相应的loader来处理。webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。
Loader特性
- loader 支持链式传递。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
- loader 可以是同步的，也可以是异步的。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收查询参数。用于对 loader 传递配置。
- loader 也能够使用 options 对象进行配置。
- 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
Loader的使用
有三种使用loader的方式：
- **配置(推荐)**:在`webpack.config.js`文件中指定loader。 - 内联：在每个`import`语句中显式指定loader。[](https://doc.webpack-china.org/concepts/loaders) - CLI:在shell命令中指定它们。[](https://doc.webpack-china.org/concepts/loaders#cli)
配置方法：
- 安装需要的loder
npm i --save-dev css-loder
- 在webpack.config.js文件中配置
module.exports = {
module: {
rules: [
//.css文件使用css-loader
{ test: /\.css$/, use: 'css-loader' },
//.ts文件使用ts-loader
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
常用的Loaders
文件
- url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
- file-loader 将文件发送到输出文件夹，并返回（相对）URL
JSON
- json-loader 加载 JSON 文件（默认包含
转换编译(Transpiling)
- babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
模板(Templating)
- html-loader 导出 HTML 为字符串，需要引用静态资源
- markdown-loader 将 Markdown 转译为 HTML
- react-markdown-loader 使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件
- handlebars-loader 将 Handlebars 转移为 HTML
- markup-inline-loader 将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体，或将 CSS 动画应用于 SVG 时非常有用。
样式
- style-loader 将模块的导出作为样式添加到 DOM 中
- css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
- less-loader 加载和转译 LESS 文件
- sass-loader 加载和转译 SASS/SCSS 文件
框架(Frameworks)
- vue-loader 加载和转译 Vue 组件
- angular2-template-loader 加载和转译 Angular 组件
更多第三方 loader，查看 awesome-webpack 列表