webpack4對第三方庫css，項目全局css和vue內聯css文件提取到單獨的文件(二十二)

時間 2019-11-30

標籤 webpack4 webpack 第三方 css 項目全局 vue 內聯文件提取單獨二十二欄目 CSS 简体版

原文原文鏈接

在講解提取css以前，咱們先看下項目的架構以下結構：javascript

### 目錄結構以下：
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中須要以下安裝該插件：css

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

首先想讓項目裏面的css打包生效的話，有二種方式，第一種是使用 style-loader自動將css代碼插入到head標籤style內，第二種方式是使用 extract-text-webpack-plugin 插件單獨提取一個css文件，而後在頁面上引入該css文件便可。html

下面咱們分別來介紹第三方庫css文件，項目全局的css，及vue中內聯的css或stylus樣式是如何提取到單獨的文件內的。vue

首先在介紹以前，咱們編寫全局的css的話，須要拋棄掉stylus了，爲何要拋棄掉呢？由於styl文件和extract-text-webpack-plugin 插件一塊兒使用的話會報錯，好比以下配置代碼：java

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: {}
            }
          ]
        })
      }
    ]
  }
}

報錯信息內容以下：node

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

所以對於項目全局的css文件建議直接使用css後綴便可，而後我就想在項目的入口文件app.js 這樣引入css文件，以下：git

// 引入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
代碼以下：github

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

css/base.css 代碼以下：web

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)
      }
    })
  ]
};