webpack4對第三方庫css,專案全域性css和vue內聯css檔案提取到單獨的檔案(二十二)

龍恩0707發表於2018-11-05

在講解提取css之前,我們先看下專案的架構如下結構:

### 目錄結構如下:
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄檔案             
|   |--- node_modules                       # 所有的依賴包
|   |--- app
|   | |---index
|   | | |-- views                           # 存放所有vue頁面檔案
|   | | | |-- index.vue                    
|   | | | |-- list.vue                     
|   | | |-- components                      # 存放vue公用的元件
|   | | |-- js                              # 存放js檔案的
|   | | |-- css
|   | | | |-- base.css
|   | | | |-- index.css
|   | | |-- store                           # store倉庫
|   | | | |--- actions.js
|   | | | |--- mutations.js
|   | | | |--- state.js
|   | | | |--- mutations-types.js
|   | | | |--- index.js
|   | | |-- app.js                          # vue入口配置檔案
|   | | |-- router.js                       # 路由配置檔案
|   |--- views
|   | |-- index.html                        # html檔案
|   |--- webpack.config.js                  # webpack配置檔案 
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼檔案

我們都知道提取css的外掛是使用 extract-text-webpack-plugin 這個外掛,但是在webpack4中需要如下安裝該外掛:

npm i extract-text-webpack-plugin@next -D

首先想讓專案裡面的css打包生效的話,有二種方式,第一種是使用 style-loader自動將css程式碼插入到head標籤style內,第二種方式是使用 extract-text-webpack-plugin 外掛單獨提取一個css檔案,然後在頁面上引入該css檔案即可。

下面我們分別來介紹 第三方庫css檔案,專案全域性的css,及vue中內聯的css或stylus樣式是如何提取到單獨的檔案內的。

首先在介紹之前,我們編寫全域性的css的話,需要拋棄掉stylus了,為什麼要拋棄掉呢?因為styl檔案和extract-text-webpack-plugin 外掛一起使用的話會報錯,比如如下配置程式碼:

module.exports = {
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader',
            options: {
              singleton: true // 表示將頁面上的所有css都放到一個style標籤內
            }
          },
          use: [
            {
              loader: 'style-loader',
              options: {}
            },
            {
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      }
    ]
  }
}

報錯資訊內容如下:

可以看這個文章(https://segmentfault.com/q/1010000009432668), 也是在講webpack配置styl+postcss+ExtractTextPlugin錯誤的問題。

因此對於專案全域性的css檔案建議直接使用css字尾即可,然後我就想在專案的入口檔案app.js 這樣引入css檔案,如下:

// 引入element元件化框架
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 引入樣式檔案
import './css/index.css';

如上程式碼,第三方庫檔案是餓了麼vue元件的樣式,專案全域性的css檔案是 css/index.css, 如上這樣引入進來,index.css
程式碼如下:

@import './base.css';
body {
  font-size: 18px;
  display: flex;
}

css/base.css 程式碼如下:

body, p , div {
  margin: 0;
  padding: 0;
}

然後對於 vue 檔案內部編寫css的話,如下使用stylus編寫的,程式碼如下:

<style lang="stylus">
  #list-container 
    width 100%
</style>

<template>
  <div id="list-container">hello world</div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {

      }
    }
  }
</script>

因此webpack.config.js 部分程式碼如下配置:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');

// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader',
            options: {
              singleton: false // 為true表示將頁面上的所有css都放到一個style標籤內
            }
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // extractCSS: true,
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            }),
            styl: ExtractTextPlugin.extract({
              use: 'css-loader!stylus-loader',
              fallback: 'vue-style-loader'
            })
          },
          postLoaders: {
            html: 'babel-loader'
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true, //為了開發中js有快取效果,所以加入hash,這樣可以有效避免快取JS。
      template: './views/index.html' // 模版檔案
    }),
    new ClearWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash:7].css' : 'bundle.css',
      allChunks: true
    })
  ]
};

然後在專案中執行 npm run dev 打包,可以看到打包後的bundle.css程式碼如下資訊:

如上打包會把 base.css 和 index.css 及 vue的樣式檔案都打包到 bundle.css檔案內。

但是vue內聯樣式會打包到 head內部的style標籤中,如下截圖所示:

理解ExtractTextWebpackPlugin.extract()方法

ExtractTextWebpackPlugin.extract({
  fallback:{
    loader: 'style-loader',
    options: {
      singleton: false // 為true表示將頁面上的所有css都放到一個style標籤內
    }
  },
  use:[]
});

fallback:指編譯後用什麼loader來提取css檔案。例如使用style-loader, 然後上面的options是選項,設定singleton為false的話,可以把css檔案單獨提取出來,如果為true的話,會將頁面上所有的css檔案都放在一個style標籤內。

use:指需要什麼樣的loader去編譯檔案。 如.css檔案使用css-loader,如下:

{
  loader: 'css-loader',
  options: {
    minimize: true
  }
}

現在我們需要解決的是把所有的css檔案打包到一個檔案裡面去。其實很簡單隻要把vue中的配置檔案 extractCSS: true, 會把vue中的樣式檔案提取出來 開啟就可以了,如下部分配置程式碼:

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: true, // 會把vue中的樣式檔案提取出來
    loaders: {
      css: ExtractTextPlugin.extract({
        use: 'css-loader',
        fallback: 'vue-style-loader'
      }),
      styl: ExtractTextPlugin.extract({
        use: 'css-loader!stylus-loader',
        fallback: 'vue-style-loader'
      })
    },
    postLoaders: {
      html: 'babel-loader'
    }
  }
},

然後執行打包命令,再看下效果如下所示:

JS程式碼如下所示:

因此所有的webpack.config.js 程式碼如下:

const path = require('path');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

// 清除dist目錄下的檔案
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入HappyPack外掛 
const HappyPack = require('happypack');

// 引入 ParallelUglifyPlugin 外掛
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

// 引入 webpack-deep-scope-plugin 優化
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {
  // 入口檔案
  entry: {
    main: './app/index/app.js'
  },
  output: {
    filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js',
    // 將輸出的檔案都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader',
            options: {
              singleton: false // 為true表示將頁面上的所有css都放到一個style標籤內
            }
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        use: ['happypack/loader?id=image']
      },
      {
        test: /\.js$/,
        // 將對.js檔案的處理轉交給id為babel的HappyPack的實列
        use: ['happypack/loader?id=babel'],
        // loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules') // 排除檔案
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true, // 會把vue中的樣式檔案提取出來
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            }),
            styl: ExtractTextPlugin.extract({
              use: 'css-loader!stylus-loader',
              fallback: 'vue-style-loader'
            })
          },
          postLoaders: {
            html: 'babel-loader'
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 處理圖片
        use: {
          loader: 'url-loader', // 解決打包css檔案中圖片路徑無法解析的問題
          options: {
            // 打包生成圖片的名字
            name: 'img/[name].[contenthash:7].[ext]',
            limit: 1024
          }
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 處理字型
        use: {
          loader: 'file-loader'
        }
      },
      //媒體檔案處理
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 40000,
          name: 'media/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    modules: [
      path.join(__dirname, './app'),
      'node_modules'
    ],
    extensions: ['*', '.js', '.json', '.vue', '.styl']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    inline: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  plugins: [
    new HtmlWebpackPlugin({
      hash: true, //為了開發中js有快取效果,所以加入hash,這樣可以有效避免快取JS。
      template: './views/index.html' // 模版檔案
    }),
    new ClearWebpackPlugin(['dist']),
  
    new ExtractTextPlugin({
      filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash:7].css' : 'bundle.css',
      allChunks: true
    }),
  
    /****   使用HappyPack例項化    *****/
    new HappyPack({
      // 用唯一的識別符號id來代表當前的HappyPack 處理一類特定的檔案
      id: 'babel',
      // 如何處理.js檔案,用法和Loader配置是一樣的
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'image',
      loaders: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }]
    }),
    // 使用 ParallelUglifyPlugin 並行壓縮輸出JS程式碼
    new ParallelUglifyPlugin({
      // 傳遞給 UglifyJS的引數如下:
      uglifyJS: {
        output: {
          /*
           是否輸出可讀性較強的程式碼,即會保留空格和製表符,預設為輸出,為了達到更好的壓縮效果,
           可以設定為false
          */
          beautify: false,
          /*
           是否保留程式碼中的註釋,預設為保留,為了達到更好的壓縮效果,可以設定為false
          */
          comments: false
        },
        compress: {
          /*
           是否在UglifyJS刪除沒有用到的程式碼時輸出警告資訊,預設為輸出,可以設定為false關閉這些作用
           不大的警告
          */
          warnings: false,

          /*
           是否刪除程式碼中所有的console語句,預設為不刪除,開啟後,會刪除所有的console語句
          */
          drop_console: true,

          /*
           是否內嵌雖然已經定義了,但是隻用到一次的變數,比如將 var x = 1; y = x, 轉換成 y = 5, 預設為不
           轉換,為了達到更好的壓縮效果,可以設定為false
          */
          collapse_vars: true,

          /*
           是否提取出現了多次但是沒有定義成變數去引用的靜態值,比如將 x = 'xxx'; y = 'xxx'  轉換成
           var a = 'xxxx'; x = a; y = a; 預設為不轉換,為了達到更好的壓縮效果,可以設定為false
          */
          reduce_vars: true
        }
      }
    }),
    new WebpackDeepScopeAnalysisPlugin(),
    // 設定環境變數資訊
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
};

github程式碼檢視demo

相關文章