天气正好，今天来通过postcss-px-to-viewport 的配置了解一下PostCSS plugin是什么吧
定义
postcss
PostCSS 是一个允许使用 JS 插件转换样式的工具。
*postcss-px-to-viewport *
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.
postcss-px-to-viewport 可以很方便地把px定义的宽转成vw。
使用他！
只要在postcss.config.js里面写成这样，plugins是一个对象
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 5,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['.vwignore', 'html', /^body$/],
minPixelValue: 1,
mediaQuery: true
}
}
};
或者在.postcssrc.js中
plugins是个数组，配置的部分是个数组，改成这样
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-px-to-viewport')({
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 5,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['.vwignore', 'html', /^body$/],
minPixelValue: 1,
mediaQuery: true
})
]
};
可以从这里猜到，require的是一个function，配置项传入参就好了。
在node_modules里面确认一下，
return的真的是一个function，那这个function干的是什么事情呢？
1.通过getUnitRegexp读取unitToConvert项得到一个正则
2.... 等等，为什么return的这个方法有一个css入参，这个plugin到底是怎么运作的呢？
这样一来，我们就要了解webpack调试了。
准备工作
首先，我们初始化一个纯粹的webpack4工程，这个工程和平时用的傻瓜式vue cli 构建的工程不一样，要尽量做到精简化，只安装本次调试需要的依赖。以下是我用来调试的工程代码
// 项目结构
webpack-demo
|- package.json
|- webpack.config.js
|- postcss.config.js
|- /dist
|- /src
|- index.js
|- index.html
|- style.css
|- /node_modules
// package.json
"scripts": {
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"postcss-px-to-viewport": "^1.1.1",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};
// style.css
body {
background: darkcyan;
}
.hello {
color: green;
font-size: 64px;
}
//index.js
import './style.css';
function component() {
var element = document.createElement('div');
element.innerHTML = 'hehehehehe';
element.classList.add('hello');
return element;
}
document.body.appendChild(component());
// index.html
<!DOCTYPE html>
<html>
<head>
<title>dear webpack</title>
</head>
<body></body>
</html>
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 5,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['.vwignore', 'html', /^body$/],
minPixelValue: 1,
mediaQuery: true,
},
},
};
把这个项目跑起来，打开dist/index.html 能看见这样的效果，就代表这个项目运行成功了
dist/index.html
然后
打开node_modules 里，我们感兴趣的部分，写上debugger
像这样
then，在命令行输入传说中的调试命令
node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress命令行会显示有个服务被启动了，这时，如果chrome没有打开调试窗口也没有关系，进入这个页面，点这个，然后像往常一样调试，就能进入打断点的部分一行一行地分析了
chrome://inspect/#devices
