webpack loader加载器

Loaders

webpack 可以使用loader来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

Loaders需要单独安装并且需要在webpack.config.js中的modules下进行配置:

test : 匹配loaders所处理文件的拓展名的正则表达式

loader：loader的名称

include/exclude: 手动添加必须处理的文件或文件夹或屏蔽不需要处理的文件或文件夹

query：为loaders提供额外的设置选项，不是必须填写的

---

样式

style-loader将模块的导出作为样式添加到 DOM 中

css-loader解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

less-loader加载和转译 LESS 文件

sass-loader加载和转译 SASS/SCSS 文件

postcss-loader使用PostCSS加载和转译 CSS/SSS 文件

stylus-loader加载和转译 Stylus 文件

npm install --save-dev style-loader css-loaderless-loader lesspostcss-loader

CSS预处理器

Less Loader、Sass Loader、Stylus Loader

需要先安装 postcss-loader 、autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-loader autoprefixer

---

图片url-loader

把小图片转成base64来打包css中，在webpack.config.js下面的module的rule下写规则一般限制小图片转base64可以用url-loader，其他情况都用file-loader。url-loader应该是file-loader上加了一层过滤。

{

test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,

use: [{

loader:'url-loader',

query:{

limit:10000,//用的图片并且会按照文件大小, 或者转化为 base64, 或者单独作为文件,这里大于1kb的图片会作为文件

name:'[path][name].[ext]'//在某个路径的文件夹下生成那个图片名字的文件

}

}]}

---

转换编译(Transpiling)

babel-loader加载 ES2015+ 代码，然后使用Babel转译为 ES5

解析Es6的 babel-preset-es2015 包和解析JSX的 babel-preset-react

npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-es2015 babel-preset-react

module: {

rules: [

{

test:/(\.jsx|\.js)$/,

use: {

loader:"babel-loader",

options: {

presets: [

"es2015","react"

]

}

},

exclude:/node_modules/

},]

},

---

juicer-loader juicer模版渲染

npm install--save-dev juicer juicer-loader

{

test:/\.juicer$/,

loader:'juicer-loader',

},