今天！从零开始调试webpack PostCSS插件

天气正好，今天来通过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


    
        
    
    

// 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