【webpack系列】從零搭建 webpack4+react 腳手架（三）

時間 2019-11-10

標籤 webpack系列搭建 webpack4+react webpack react 腳手架欄目 React 简体版

原文原文鏈接

本章節，咱們對如何在腳手架中引入CSS，如何壓縮CSS，如何使用CSS Modules，如何使用less，如何使用postcss等問題進行展開學習。css

1 支持css

（1）在app目錄，新建一個css，命名爲index.css，輸入樣式：

    h1{
        display: flex;
        height: 200px;
        align-items: center;
        justify-content: center;
        color: #8FBC8F;
    }

（2）在index.js中引入css

import './index.css'

（3）配置loader

在第一節，咱們知道，webpack只能編譯js文件，不能編譯css，它不認識css文件，因此須要配置loader加載器來預處理。
首先安裝style-loader和css-loader：html

npm install --save-dev style-loader css-loader

（4）配置module.rules：

在webpack.prod.conf.js中配置：前端

     module: {
            rules:
                [
                    {
                        test: /\.(css)$/,
                        use: [
                            'style-loader',
                            'css-loader',
                        ]
                    }
                ]
        },

loader的加載順序是從右邊到左邊，css-loader是加載經過import引入的css文件，而style-loader的做用是把樣式插入到DOM中。node

最後，執行npm run build試試看樣式是否生效。react

npm run build

打開頁面，發現樣式已經生效了。打開控制檯查看，你會發現css的確是經過style在頁面上方插入的。webpack

2 導出CSS文件

若是咱們但願把樣式導出到css文件，而且在頁面引用該css文件，又要怎麼作呢？
這裏先提在webpack4版本之前一個插件，叫extract-text-webpack-plugin，熟悉webpack3的同窗，可能知道，這個插件主要是爲了抽離css樣式，防止將樣式打包在js中引發頁面樣式加載錯亂的現象。然而，在webpack4版本下，該插件已經再也不兼容，官方提示咱們去下載使用另一個插件，叫mini-css-extract-plugin。

（1）安裝mini-css-extract-plugin

npm install mini-css-extract-plugin --save-dev

（2）引入mini-css-extract-plugin

在webpack.prod.conf.js中引入web

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

（3）修改配置loader

     module: {
            rules:
                [
                    {
                        test: /\.(css)$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                            }
                        ]
                    }
                ]
        },

（4）配置plugin

      //導出css 
            new MiniCssExtractPlugin({
                filename: 'css/[name].[hash].css',
                chunkFilename: 'css/[id].[hash].css',
            }),

最後你的webpack.prod.conf.js看起來是這樣npm

    const merge = require('webpack-merge');
    const baseWebpackConfig = require('./webpack.base.conf');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

    module.exports = merge(baseWebpackConfig, {
        mode: 'production',
        output: {
            filename: "js/[name].[chunkhash:16].js",
        },
        module: {
            rules:
                [
                    {
                        test: /\.(css)$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                            }
                        ]
                    }
                ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: 'public/index.html',
                inject: 'body',
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
            }),
            new CleanWebpackPlugin(['../dist'], { allowExternal: true }),

            //導出css 
            new MiniCssExtractPlugin({
                filename: 'css/[name].[hash].css',
                chunkFilename: 'css/[id].[hash].css',
            }),
        ],
        optimization: {
            minimizer: [
                new UglifyJSPlugin()
            ],
            splitChunks: {
                chunks: "all",
                minChunks: 1,
                cacheGroups: {
                    framework: {
                        priority: 200,
                        test: "framework",
                        name: "framework",
                        enforce: true,
                        reuseExistingChunk: true
                    },
                    vendor: {
                        priority: 10,
                        test: /node_modules/,
                        name: "vendor",
                        enforce: true,
                        reuseExistingChunk: true
                    }
                }
            }
        }
    });

（5）編譯build命令

npm run build

查看下dist目錄，你會看到css已經被編譯到css文件夾中，而且在html文件中成功引入。數組

3 壓縮css

打開編譯後的css文件，你會發現css沒有壓縮處理。在webpack4版本中，只要定義了mode爲production，那麼webpack是默認會調用UglifyJsPlugin對js文件進行代碼壓縮的，無需咱們手動引入。可是css仍是須要咱們手動引入插件。在webpack4版本中，使用optimize-css-assets-webpack-plugin這個插件處理壓縮css文件。

（1）安裝optimize-css-assets-webpack-plugin

npm install optimize-css-assets-webpack-plugin --save-dev

（2）引入optimize-css-assets-webpack-plugin

在webpack.prod.conf.js中引入optimize-css-assets-webpack-plugin ：瀏覽器

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

（3）配置minimizer參數

minimizer參數是配置在optimization參數內，和splitChunks同級。

      minimizer: [
                new UglifyJSPlugin(),
                new OptimizeCSSAssetsPlugin({
                    cssProcessorOptions: true
                        ? {
                            map: { inline: false }
                        }
                        : {}
                })
            ],

（4）編譯build命令

npm run build

再次查看dist/css目錄下的css文件，你會發現已是壓縮後的了。

4 支持 css modules

css modules是react官方提倡的一種css解決方案，把import後的對象賦值給一個變量。在jsx中直接使用這個變量下的class名稱來設置css。編譯後，會在css屬性加上惟一的hash編碼，防止css全局污染。它的好處和壞處這裏再也不做更多的闡述。

（1）配置css-loader參數

配置loader，傳入的是數組，它的子項，能夠是字符串，好比'css-loader',也能夠是一個對象，支持其餘參數的設置,設置loader爲：

     {
                                loader: 'css-loader',
                                options: {
                                    modules: true,
                                    localIdentName: '[local]__[hash:7]'
                                }
       }

modules參數，定義是否開啓css modules，默認是否。localIdentName定義生成class的名稱格式，這樣設置後，若是你定義了一個叫main的class，最後生成的是main__i72tywq這樣的格式。

（2）試試看

修改index.js

    import React from "react";
    import ReactDom from "react-dom";
    import indexStyle from './index.css';

    ReactDom.render(
        <h1 className={indexStyle.main}>hello, world!</h1>,
        document.getElementById("root")
    );

定義一個main的class

    .main{
        display: flex;
        height: 200px;
        align-items: center;
        justify-content: center;
        color: #8FBC8F;
    }

（3）編譯build命令

npm run build

在dist目錄打開編譯後的index.css文件，查看css，發現 class名稱後都加了hash後綴，並且html中的引用也是加了後綴。

5 Less or Sass

做爲一個前端，你確定不知足於現有的css方案，less或者sass是一個不錯的選擇。
如何讓它支持less，或者sass？webpack不認識less，須要配置loader。

（1）安裝less-loader

npm install less less-loader --save-dev

（2）配置loader

在webpack.prod.conf.js中的module.rules內增長一個對象：

     {
                        test: /\.(less)$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: true,
                                    localIdentName: '[local]__[hash:7]'
                                }
                            },
                            {
                                loader: 'less-loader'
                            }
                        ]
    }

（3）編譯build命令

npm run build

在dist目錄打開編譯後的index.css文件，查看css，less文件成功被編譯。引入sass也是相似。這裏再也不闡述。

6 使用postcss

PostCSS是什麼？或許，你會認爲它是預處理器、或者後處理器等等。其實，它什麼都不是。它能夠理解爲一種插件系統。
你能夠在使用預處理器的狀況下使用它，也能夠在原生的css中使用它。它都是支持的，而且它具有着一個龐大的生態系統，例如你可能經常使用的Autoprefixer，就是PostCSS的一個很是受歡迎的插件。

（1）安裝postcss

npm install postcss postcss-loader --save-dev

（2）安裝postcss某個插件，這裏我用Autoprefixer舉例

npm install autoprefixer --save-dev

（3）配置postcss.config.js

在根目錄新建postcss.config.js

    module.exports = () => ({
        plugins: {
            autoprefixer: { browsers: ['last 5 version', '>1%', 'ie >=8'] },
        }
    });

（4）設置loader

修改webpack.prod.conf.js中的中的module.rules

     module: {
            rules:
                [
                    {
                        test: /\.(css)$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIdentName: '[local]__[hash:7]'
                                }
                            },
                            {
                                loader: 'postcss-loader'
                            }
                        ]
                    },
                    {
                        test: /\.(less)$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIdentName: '[local]__[hash:7]'
                                }
                            },
                            {
                                loader: 'postcss-loader'
                            },
                            {
                                loader: 'less-loader'
                            }
                        ]
                    }
                ]
        },

（4）編譯build命令

npm run build

看下編譯生成的css文件，查看代碼，已經自動加了瀏覽器前綴。
最後你能夠把webpack.prod.conf.js內關於module rules的設置拷貝到webpack.dev.conf.js,修改第一個爲style-loader

     module: {
            rules:
                [
                    {
                        test: /\.(css)$/,
                        use: [
                           'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIdentName: '[local]__[hash:7]'
                                }
                            },
                            {
                                loader: 'postcss-loader'
                            }
                        ]
                    },
                    {
                        test: /\.(less)$/,
                        use: [
                            'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIdentName: '[local]__[hash:7]'
                                }
                            },
                            {
                                loader: 'postcss-loader'
                            },
                            {
                                loader: 'less-loader'
                            }
                        ]
                    }
                ]
        },