前言

此內容是個人學習筆記,以便日後翻閱。非教程,如有錯誤還請指出

webpack 打包css模塊

webpack是js模塊打包器, 如果在入口文件引入css文件或其它的less、sass等文件,需要特定的 loader去解析它們。

css-loader: 解析css文件並且支持@import()等引入css模塊
style-loader: 通過插入 <style> 標記將CSS添加到DOM中

webpack 處理loader的是 module{}, 不要寫成 loader: {}
rules: 加載器規則

webpack 配置如下

   module.exports = {
     ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [‘style-loader‘, ‘css-loader‘]
         }
       ]
     }
   } 
 

註意: use中的loader的執行順序是從右到左, 先使用 css-loader解析css,再使用 style-loader將解析完的css插入DOM文檔中

單獨抽離css文件樣式以及優化CSS文件

我想將解析後的css單獨抽離出一個 css文件, 然後通過 like標簽的形式引入。
需要使用插件來幫忙, plugins主要是做 loader完成不了的事情。功能很強大。

mini-css-extract-plugin: 此插件將CSS提取到單獨的文件中。

• 先安裝
• const MixiCssExtractPlugin = require(‘mini-css-extract-plugin‘)

webpack配置如下, 基與上面的代碼修改

module.exports = {
     ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             MixiCssExtractPlugin.loader,
             ‘css-loader‘
            ]
         }
       ]
     },
     plugins: [
       new MixiCssExtractPlugin({
         filename: "[name].css",
         chunkFilename: "[id].css"
       })
     ]
   } 
 

處理 sass文件

需要安裝 sass sass-loader

webpack 配置如下

  module.exports = {
    ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MixiCssExtractPlugin.loader,
            ‘css-loader‘,
            ‘sass-loader‘
          ]
        }
      ]
    },
    plugins: [
      new MixiCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]
  }

優化壓縮 css文件和js文件

上面雖然已經可以把 css 單獨抽離成一個 css文件, 但是代碼並沒有得到壓縮, 下面進行壓縮等優化處理
安裝插件:
optimize-css-assets-webpack-plugin: 用於優化\最小化CSS資產的Webpack插件
uglifyjs-webpack-plugin: 用於優化 js資產的 Webpack插件

webpack 配置:

const OptimizeCssAddetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘)
const UglifyjsWebpackPlugin = require(‘uglifyjs-webpack-plugin‘)
module.exports = {
    mode: ‘production‘,
    optimization: {
        minimizer: [
            new UglifyjsWebpackPlugin({
                test: /\.js(\?.*)?$/i,
                cache: true,
                parallel: true, // 並行化可以顯著加速構建，因此強烈建議設置為 true
                sourceMap: true, // 使用源映射,將錯誤信息位置映射到模版
            }),
            // 使用壓縮css插件之前,一定要使用 uglifyjs-webpack-plugin插件對js代碼進行壓縮
            new OptimizeCssAddetsWebpackPlugin({}),
        ]
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MixiCssExtractPlugin.loader,
            ‘css-loader‘,
            ‘sass-loader‘
          ]
        }
      ]
    },
    plugins: [
      new MixiCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]
  }

筆記地址

Webpack學習筆記二 CSS模塊轉換