webpack4.0從零開始單頁（多頁）應用配置(三) --- 輔助工具

webpack4.0從零開始單頁（多頁）應用配置 (一)
webpack4.0從零開始單頁（多頁）應用配置(二)

css相關

項目引入Less

安裝Less, less-loader

npm install --save-dev less less-loader

修改webpack.config.js loader配置

{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      'css-loader',
      'less-loader',
    ]
  },

css自動添加前綴

一些css3樣式須要添加各個廠家的前綴才能生效，而如今css3運用比較長見，顯然咱們不必在每一個地方去添加前綴。

安裝：postcss-loader 與autoprefixer插件。

npm i --save-dev postcss-loader autoprefixer

根目錄下新增postcss.config.js文件，並添加如下代碼：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

修改webpack配置以下：

{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      'css-loader',
      'postcss-loader',
      'less-loader',
    ]
  },

postcss-loader還能夠支持許多插件，詳情請查看https://github.com/postcss/po...

提取css

webpack4.0已經用mini-css-extract-plugin替代了ExtractTextWebpackPlugin;

如下是官網給出的對比：
Compared to the extract-text-webpack-plugin:

• Async loading
• No duplicate compilation (performance)
• Easier to use
• Specific to CSS

相對在extract-text-webpack-plugin的基礎上配置更加簡單了，打包速度也獲得了提高

安裝插件： npm install --save-dev vue-style-loader mini-css-extract-plugin

修改webpack.config.js配置

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

plugins:[
    ...,
    new MiniCssExtractPlugin({ //提取css
      filename: "[name].css?v=[chunkhash]",
      chunkFilename: "[id].css"
    })
    ...
]

將以前在webpack.config.js里加的css和Less規則移到webpack.dev.js文件中配置以下

{
    test: /\.css$/,
    use: [
      {
        loader: 'vue-style-loader',
        options: {
          fallback: 'style-loader',
          hmr: true,
          reloadAll: true,
        },
      },
      'css-loader',
    ],
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          fallback: 'style-loader',
          hmr: true //熱重載
        }
      },
      'css-loader',
      'postcss-loader',
      'less-loader',
    ]
}

同理修改webpack.prd.js

{
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          fallback: 'style-loader',
          hmr: true,
          reloadAll: true,
        },
      },
      'css-loader',
    ],
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          fallback: 'style-loader',
          hmr: true //熱重載
        }
      },
      'css-loader',
      'postcss-loader',
      'less-loader',
    ]
}

打包時清空dist目錄

解決打包後文件目錄愈來愈亂的問題

安裝：clean-webpack-plugin

npm i --save-dev clean-webpack-plugin

new CleanWebpackPlugin({
  cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'dist')], //打包前刪除匹配文件
  verbose: true， //是否日誌輸出
  protectWebpackAssets: false， //不容許刪除webpack資產
})

HappyPack

將 loader編譯單線程變爲多線程，從而加快webpack的構建速度

安裝HappyPack

npm install --save-dev HappyPack

修改webpack.config.js配置:

const HappyPack = require('happypack');
const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});

module:{
    //忽略其餘 ...
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "happypack/loader?id=babel"
            }
        }
    ]
},
plugins: [
   //忽略其餘 
   new HappyPack({
      id: 'babel', //與Loader的id對應
      loaders: ['babel-loader?cacheDirectory'],//實際匹配的loader
      threadPool: happyThreadPool, //
      verbose: true
    })
]

想更深刻的瞭解HappyPack happypack 原理解析

optimization

optimization.splitChunks 用於替代commonsChunkPlugin，分離文件，將代碼分離成多個文件

webpack.config.js添加以下配置：

optimization: {
    splitChunks: { //替代以前的commonsChunkPlugin
      chunks: 'initial', //默認async  initial針對初始chunks
      minSize: 50, //切割完後須要新生成的chunk知足大於50kb 不然不生成新的chunk
      minChunks: 2, //兩個地方引用後就會提取到chunks裏
      maxAsyncRequests: 5, // 最多5個異步請求該Module
      name: 'common' //生成的文件名稱
    }
  }

啓用熱替換模塊HotModuleReplacementPlugin

webpack.dev.js增長以下配置

const webpack = require('webpack');
plugins:[
    new webpack.HotModuleReplacementPlugin({})
]

npm run dev 自動打開瀏覽器地址

修改pacakge.json以下:

"scripts": {
   "dev": "webpack-dev-server --development --open --config ./webpack.dev.js",
   "build": "webpack --production --config ./webpack.prod.js"
}

分離vue文件

在大型項目中引用一些庫是很常見的事，因爲這些文件基本上是不會變的，因此須要單獨分離出來，從而不用在每次發版本以後用戶還須要加載此類文件，這裏拿vue爲例子

• 未分離vue時，能夠發現vue被打到Main文件了，致使main.js體積比較大，而main.js在每次發版本以後，後綴是會變的，因此這樣會比較消耗性能。

修改webpack.config.js配置

splitChunks:{
  cacheGroups: {
    vueBase: {
      name: 'vueBase',
      test: (module) => {
        return /vue|vuex|vue-router$/.test(module.context); //將vue, vuex, vue-router 匹配的單獨打包爲vueBase
      },
      chunks: 'initial',
      priority: 10
    },
    common: {
      name: 'common',
      chunks: 'initial',
      priority: 2,
      minChunks: 2
    }
  }
}

執行npm run build

多了一個vueBase文件，將vue的相關提取到單獨的文件了

webpack-bundle-analyzer

webpack對項目須要優化，還須要在實戰中一步一步的完善，推薦一個插件，可視化webpack打包後的狀況，而後本身作出分析看哪兒比較大而後作相對的優化~

安裝:

npm i --save-dev webpack-bundle-analyzer

webpack.prod.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 plugins:[
 //忽略
    new BundleAnalyzerPlugin()
  ]

以上基本上就是webpack+vue的一些經常使用的東西了，基本上能夠知足簡單項目的一個使用，感謝閱讀~若有不足地方請留言討論(p≧w≦q)

---------------------------------------------------項目源碼