Webpack4 如何处理css

https://github.com/hyyfrank/webpack4 branch: feature/lesson5
我们需要做什么
- 支持css的处理
- 把css抽取成单独的css文件
- 支持css module
- 支持css next等新特性
- 支持css style lint校验
- 减少无用的css代码
- 使用post css做些处理比如autoprefix,css-next
- 最小化css文件
需要什么loader和plugin

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
- loader:
  - sass-loader: 简单说就是sass转换成css
  - postcss-loader: postcss很强大，可以这么简单理解下，css-->ast-->plugin-->xxxx,大概就是，先把css转化为抽象语法树，然后使用javascript处理，然后厉害的就是，真的啥都有个插件，只有想不到!
  - css-loader:The css-loader interprets @import and url() like import/require() and will resolve them.选项我们会用到modules, localIdentName
  - style-loader:Adds CSS to the DOM by injecting a <style> tag
- plugin:
  - mini-css-extract-plugin：抽取css成单独文件
  - purifycss-webpack：删除没使用的css选择器
  - stylelint-webpack-plugin：对css做lint
  - optimize-css-assets-webpack-plugin:webpack在build的过程中优化和最小化css，默认使用cssnano做预处理器，cssnano也是个postcss的plugin

好了，废话到此为止，上代码看下就都明了，为了让代码更清晰，我们把对css的处理单独拉出来，再通过webpack-merge合到一起，下面是css的处理代码：

抽取代码成单独文件，现在目测原来的extract-text-webpack-plugin还是能用的，如果是使用webpack4的话，也得更新extract-text-webpack-plugin的版本到^4.0.0-beta.0，下面注释掉的，大家可以加回来试试，因为webpack4推荐使用mini-css-extract-plugin，所以我们就使用这个,而且mini-css-extract-plugin不支持hmr,但是不是在开发环境，我们只放在生产环境，其实还是ok的。

第一步：support style-loader,css-loader,sass-loader


const cssDevRules=[

    {

        loader:'style-loader'

    },

    {

        loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]',

    },

    {

        loader:'sass-loader',

    }

];

const cssProdRules=[

    {

        loader: MiniCssExtractPlugin.loader,

    },

    {

        loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]',

    },

    {

        loader:'sass-loader',

    }

];

console.log("is prod:"+isProd);

const baseConfig = {

    module: {

        rules: [

            {

                test: /\.(css|sass|scss)$/,

                use: isProd? cssProdRules:cssDevRules,

                exclude: /node_modules/,

            },

        ]

    },

    plugins: [

    ],

};

第二步：css-next /autoprefixer support

加上posts-loader来支持auto-prfix自动增加，同时，为了支持css-next最新的特性，现在不需要单独加，看官方文档有个postcss-preset-env，直接加了支持autoprefixer,PostCSS Preset Env 能把现代的css转化成大部分浏览器都能解析的样式，会根据浏览器的版本决定加什么样的polyfill.


npm install postcss-preset-env

简单修改下postcss.config.js


module.exports = {

    plugins: {

        'postcss-import': {},

        'postcss-preset-env': {

            browsers: 'last 2 versions',

        },

        'cssnano': {},

    },

};


    {

        loader:'postcss-loader',

        options: {

            sourceMap: true,

            config: {

                path: __dirname + '/postcss.config.js'

            }

        },

    },

第三步：add style-lint support

加style-lint来控制代码质量，当然我只是加上而已，具体规则要自己去定，或者你可以用标准的stylelint-config-standard,对应的plugin是stylelint-config-standard


const StyleCssLintPlugin = require("stylelint-webpack-plugin");

const StyleLintPlugin = new StyleCssLintPlugin({

    configFile: '.stylelintrc',

    context: 'src',

    files: '**/*.scss',

    failOnError: false,

    quiet: false,

});

baseConfig.plugins=[

        StyleLintPlugin,

        MiniCssPlugin,

        OptimizeCSSPlugin,

    ];

当然也要加个.stylelintrc文件,现在简单先用stylelint-config-standard。


{

  "extends": "stylelint-config-standard"

}

第四步：remove unused css

purifycss：移除无用css,有人使用css tree shake这种术语，anyway,感觉差不多


const PurifyCSSPlugin = require("purifycss-webpack");

const PurifyCssPlugin = new PurifyCSSPlugin({

    paths: glob.sync(path.join(__dirname, '../src/index.js')),

    styleExtensions: ['.css', '.scss'],

    purifyOptions: {

        whitelist: ['*purify*']

    }

});

baseConfig.plugins=[

    MiniCssPlugin,

        PurifyCssPlugin,

        StyleLintPlugin,

        OptimizeCSSPlugin,

        // new ExtractTextPlugin("styles.css"),

    ];

第五步：minimize css

optimize-css-assets-webpack-plugin

cssProcessor: 压缩和优化CSS 的预处理器，现在默认是 cssnano.这是一个函数，接受一个CSS和options参数，返回promise

canPrint: {bool} 表示插件能够在console中打印信息，默认值是true


const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const OptimizeCSSPlugin = new OptimizeCSSAssetsPlugin({

    cssProcessor: cssnano,

    cssProcessorOptions: {

        discardComments: {

            removeAll: true,

        },

        // Run cssnano in safe mode to avoid

        // potentially unsafe transformations.

        safe: true,

    },

    canPrint: true,

});

baseConfig.plugins=[

    MiniCssPlugin,

    PurifyCssPlugin,

    StyleLintPlugin,

    OptimizeCSSPlugin,

    // new ExtractTextPlugin("styles.css"),

  ];

OK，好了，大概该做的都做完了，如果需要进一步处理，可以考虑postcss的一些plugin，甚至可以自己写点plugin,因为这是讲webpack不是postcss，所以留给你自己探索吧～

【webpack4 系列之五】

【webpack4 系列之五】

Webpack4 如何处理css