Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
option：为loaders提供额外的设置选项（可选）
css预处理
安装所有预处理css的loader
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
css-loader 处理css中路径引用等问题
配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
引用：https://doc.webpack-china.org/loaders
style-loader 动态把样式写入css
配置
建议将 `style-loader` 与 [`css-loader`](https://github.com/webpack/css-loader) 结合使用
写法与以上相同
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
sass-loader scss编译器
配置
通过将 [style-loader](https://github.com/webpack-contrib/style-loader) 和 [css-loader](https://github.com/webpack-contrib/css-loader) 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
}]
}
};
less-loader less编译器
将 css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。
配置
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" //将 CSS 转化成 CommonJS 模块
}, {
loader: "less-loader" // 将 less编译成 CSS
}]
}]
}
};
通常，生产环境下比较推荐的做法是，使用 ExtractTextPlugin 将样式表抽离成专门的单独文件。这样，样式表将不再依赖于 JavaScript：
配置
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"//或者如果用的sass编译使用sass-loader
}],
// 在开发环境使用 style-loader
fallback: "style-loader"
})
}]
},
plugins: [
extractSass
]
};
postcss-loader 一个CSS的处理平台功能较多.
举例：css里定义变量、为适配不同的浏览器给css的样式加前缀等
适配浏览器加前缀-webkit- -o- .....
- 首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
- 配置webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
}
}
- 在根目录新建postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
配置结束后，重新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不同前缀了。
js处理
- 安装所有js处理的 loader
npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader
babel-loader
配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
]
}
.babelre文件
{
"presets": ["es2015", "stage-2",["env", { "modules": false }]],
"plugins": ["transform-runtime"],
"comments": false
}
jsx-loader
配置
module.exports ={
entry: './entry.js',
output: { path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/},
{test: /\.jsx$/, loader: "jsx-loader"}
{test: /.css$/, loader: 'style!css'} ]
}
};
.babelrc的文件
{
"presets": ["es2015","react"],
"plugins":["antd"]
}
图片处理
url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
安装
npm install --save-dev url-loader
配置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 400,400k以内的转换为base64打入包内 超过的还是引入图片(命令窗口会爆红)
}
}
]
}
]
}
}
文件处理
file-loader将文件发送到输出文件夹，并返回（相对）URL
默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
安装
npm install --save-dev file-loader
配置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
生成文件 file.png，输出到输出目录并返回 public URL。
"/public/path/0dcbbaa7013869e351f.png"
转至：https://doc.webpack-china.org/loaders/file-loader
