(精华)2020年7月12日 webpack 配置第三方 loader

file-loader：处理理静态资源模块，url-loader :处理图片 base64

yarn add file-loader-D 或者 npm install file-loader-D
yarn add url-loader-D 或者 npm install url-loader-D

module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
//use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组
use: {
loader: "url-loader",
// options额外的配置，比如资源名称
options: {
// placeholder 占位符  [name]⽼老老资源模块的名称
// [ext]⽼资源模块的后缀
// https://webpack.js.org/loaders/file-loader#placeholders
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "images/",
//小于2048B，才转换成base64 的文件打成Base64的格式，写入JS
limit: 2048,
publicPath: '/images' //最终生成的CSS代码中，图片URL前缀
}
}
}
]
}

CSS 预处理

yarn add style-loader css-loader --dev

// 模块解析
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}] //方式一
//use: ["style-loader", loader: "css-loader" ]  //方式二
}
]
}

配置 less 环境

yarn add less less-loader --dev

// 模块解析
module: {
rules: [
{
test: /\.less$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: 'postcss-loader'
},
{
loader: "less-loader"
}
] //方式一
}
]
}

配置 scss 环境

yarn add node-sass sass-loader --dev

// 模块解析
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}] //方式一
//use: ['style-loader','css-loader','sass-loader'] //方式二 }
}
}

PostCSS 相关配置

yarn add postcss-loader postcss --dev

module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: 'postcss-loader'
}]
}
]
}

postcss.config.js

module.exports = {
plugins: {
//require("autoprefixer")
'autoprefixer':{},//自动补全
//需要在packahe.json添加
// "browserslist": [
//     "last 10 Chrome versions",
//     "last 5 Firefox versions",
//     "Safari >= 6",
//     "ie> 8"
//   ],
//单位转换插件
'postcss-preset-env': {},
'postcss-pxtorem': {
rootValue: 10,
minPixelValue: 2,
propWhiteList: []
}
}
}