從零配置webpack 4+react腳手架（三）

時間 2019-11-25

標籤配置 webpack 4+react react 腳手架欄目 React 简体版

原文原文鏈接

前言：

可前往個人Github/blog進行閱讀，如有幫助，賞個star😊javascript

這一節咱們將在腳手架中引入CSS，SASS，LESS，而且實現代碼壓縮，以及PostCSS的使用。css

先讓CSS跑起來

新建CSS文件

在咱們的 /src 目錄下，新建一個文件名爲 app.css ，並輸入如下代碼：html

.App {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightcoral;
}

h1 {
  font-size: 16px;
  color: #fff;
}
複製代碼

在app.js中引入css

打開 /src/app.js ，添加如下代碼：java

import './app.css';
複製代碼

配置loader

wbpack只能編譯js文件，css文件是沒法被識別並編譯的，咱們須要loader加載器來進行預處理。首先安裝 style-loader 和 css-loader ：node

npm install --save-dev style-loader css-loader  
複製代碼

注：react

遇到後綴爲.css的文件，webpack先用css-loader加載器去解析這個文件，遇到「@import」等語句就將相應樣式文件引入（因此若是沒有css-loader，就無法解析這類語句），最後計算完的css，將會使用style-loader生成一個內容爲最終解析完的css代碼的style標籤，放到head標籤裏。
loader是有順序的，webpack確定是先將全部css模塊依賴解析完獲得計算結果再建立style標籤。所以應該把style-loader放在css-loader的前面（webpack loader的執行順序是從右到左）。

配置module.export.rules

在webpack.prod.config.js中配置：webpack

const merge = require('webpack-merge');
const common = require('./webpack.common.config.js');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(common, {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 
          'style-loader', 
          'css-loader' 
        ]
      }
    ]
  },
  //...
});
複製代碼

如今，執行一下 npm run build ，打開頁面，發現樣式生效。你再打開控制檯看Elements，發現style樣式已經插入到了****內。git

打包出CSS獨立文件

咱們能夠看到上面，style樣式是經過style-loader預處理，插入到了head標籤內，可是咱們日常寫樣式的時候，必定是經過引入外部css文件進行樣式引入的，那咱們怎麼作呢？使用插件 mini-css-extract-plugin :github

安裝 `mini-css-extract-plugin`

npm install --save-dev mini-css-extract-plugin
複製代碼

引入 `mini-css-extract-plugin`

在 webpack.prod.config.js 中引入：web

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
複製代碼

配置plugin

module.exports = merge(common, {
  plugins: [
    //...
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[id].[hash].css',
    }),
  ]
});
複製代碼

修改loader

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 
          MiniCssExtractPlugin.loader,
          'css-loader' 
        ]
      }
    ]
  },
複製代碼

如今你的webpack.prod.config.js應該是下面這樣：

const merge = require('webpack-merge');
const common = require('./webpack.common.config.js');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(common, {
  mode: 'production',
  output: {
    filename: 'js/[name].[chunkhash:8].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 
          MiniCssExtractPlugin.loader,
          'css-loader' 
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()],
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        framework: {
          priority: 100,
          test: "framework",
          name: "framework",
          enforce: true
        },
        vendors: {
          priority: -10,
          test: /node_modules/,
          name: "vendor",
          enforce: true,
        },
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'public/index.html',
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
      },
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[id].[hash].css',
    }),
  ]
});
複製代碼

咱們再執行一下 npm run build ，查看dist目錄，你會發現css文件已經被單獨打包出來了。

壓縮打包出的CSS文件

咱們打開dist目錄下打包生成的css文件，你會發現他和咱們寫的是如出一轍的，這意味着該代碼沒有被壓縮，使用插件optimize-css-assets-webpack-plugin來作這項工做。

安裝optimize-css-assets-webpack-plugin

npm install --save-dev optimize-css-assets-webpack-plugin
複製代碼

引入optimize-css-assets-webpack-plugin

在 webpack.prod.config.js 中引入：

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
複製代碼

配置minimizer參數

optimization: {
  minimizer: [
    new UglifyJsPlugin(),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp:/\.css$/g,
      cssProcessor:require("cssnano"),
      cssProcessorPluginOptions:{
        preset:['default', { discardComments: { removeAll:true } }]
      },
      canPrint:true
    })
  ],
  //...
}
複製代碼

參數	意義
assetNameRegExp	正則表達式，用於匹配須要優化或者壓縮的資源名。默認值是
/.css$/g
cssProcessor	用於壓縮和優化CSS 的處理器，默認是 cssnano.
cssProcessorPluginOptions	傳遞給cssProcessor的插件選項，默認爲{}
canPrint	表示插件可以在console中打印信息，默認值是true
discardComments	去除註釋

另外，這段配置也是能夠放到 plugins 這個屬性下進行配置的。配置完成，執行 npm run build ，查看dist目錄下打包出的css文件是否是代碼被壓縮了！

接着讓Less或Sass飛起來

咱們寫項目的時候沒幾我的會去寫css吧？sass或less對於工做效率的提升是肉眼可見的，可是咱們webpack也一樣沒法理解這種編寫方式，那就須要配置loader作預處理，將其轉換爲css。

安裝less-loader,sass-loader

npm install --save-dev less less-loader node-sass sass-loader
複製代碼

配置loader

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

module: {
    rules: [
      //...
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
    ]
  },
複製代碼

咱們將 src 目錄下的 app.css 改成 app.less 或 app.sass ，在裏面改成如下代碼：

.App {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightcoral;
  h1 {
    font-size: 16px;
    color: #fff;
  }
}


複製代碼

而後修改 app.js 中的引入 import 'app.less' 或 import 'app.sass'

執行 npm run build 看看是否把less文件或sass文件打包成了dist目錄下的css文件

使用PostCSS

postcss 一種對css編譯的工具，相似babel對js的處理，常見的功能如： 1 . 使用下一代css語法 2 . 自動補全瀏覽器前綴 3 . 自動把px代爲轉換成rem 4 . css 代碼壓縮等等 postcss 只是一個工具，自己不會對css一頓操做，它經過插件實現功能，autoprefixer 就是其一。

安裝postcss

npm install postcss postcss-loader --save-dev
複製代碼

安裝postcss某個插件，以Autoprefixer舉例

npm install autoprefixer --save-dev
複製代碼

配置postcss.config.js

在根目錄新建postcss.config.js

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

設置loader

module.exports = merge(common, {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
    ]
  },
  //...
});
複製代碼

執行 npm run build 能夠，瀏覽器打開dist目錄下的index.html，控制檯看css樣式，加上了瀏覽器前綴：

咱們能夠複製一份webpack.prod.config.js中關於rules的配置到webpck.dev.config.js，修改第一個爲style-loader，由於咱們在開發環境下不必打包單獨文件。

如下是webpck.dev.config.js部分配置

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
    ]
  },
複製代碼