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',
},
