9102了，快來了解webpack4！

前言

在當今的前端開發中，咱們使用的打包工具可能會有不少種，固然webpack就是其中一種，那麼webpack中的配置其實是不少的，因此今天來整理下經常使用的配置以及它的做用。

如何開始

咱們建立一個空的文件夾，而後使用npm init webpack-demo，下面一路回車,而後他會在咱們的文件夾下建立一個package.json這樣的文件

在當前項目中安裝webpack4

咱們能夠執行這條命令： npm install webpack-cli webpack -D

那麼這裏假設webpack最新版本號是：4.1.2,若是咱們不想安裝最新的版本，而是咱們人工選擇，該如何選擇呢？

npm info webpack 執行這條命令後控制檯就會列出webpack的全部可用版本

那麼找到咱們想要安裝的版本，記錄下版本號(假設咱們想安裝webpack4.16.5這個版本)

咱們就可使用npm install webpack@4.16.5 -D安裝指定版本的webpack了。

開始配置

webpack4中官方已經提供了默認配置，但有時並非那麼符合咱們的需求，咱們想自行配置，那麼咱們能夠在項目目錄下建立webpack.config.js文件，來書寫本身的配置

配置介紹

const path = require('path')
module.exports = {
    mode: 'production',
    entry: {
        main: './index.js'
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    }
}
複製代碼

那麼上面的配置意思是告訴webpack應該從 index.js文件開始打包，打包後生成的文件應該放到build文件夾下，生成的文件名叫bundle.js,這裏須要注意的是path必須是絕對路徑，因此這塊咱們須要引入nodejs的path模塊來輔助咱們,若是mode是production那麼意味着打包後的js是被壓縮過的代碼，固然這裏填寫development的話代碼就不會被壓縮了

Loader

那麼咱們爲何須要使用Loader,是由於webapck在默認狀況下，他只知道如何打包JS文件，而不知道如何打包圖片，字體等其餘類型文件，因此在這裏咱們就須要藉助Loader來輔助webpack在打包時對特殊文件進行處理。

圖片文件打包配置

咱們在上面的基礎之上進行配置

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './index.js'
    },
    module:{
      rules: [{
          test: /\.jpg$/,
          use: {
            loader:'file-loader'
          }
        }]  
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    }
}
複製代碼

那麼在這裏咱們增長了一個module配置，這裏其實就是告訴webpack如何打包模塊，rules就是打包模塊的規則，test裏寫的是匹配規則，use是指使用哪一個loader進行處理，那麼這裏咱們使用了官方推薦的file-loader，那麼這個loader，其實它就能夠對圖片之類的文件進行處理，因此這樣配置咱們就能夠成功的進行打包啦。

別忘記安裝file-loader的依賴,npm install file-loader -D

webpack-dev-server配置

使用devserver能夠提升咱們的開發效率，好比熱更新

devServer: {
    contentBase: './dist',
    open: 'true',
    port: 8080,
    hot: true,
    hotOnly:true
  },
複製代碼

css打包配置

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

這裏須要注意若是有多個loader,那麼loader實際上是從下到上執行，從右到左執行，但這裏的postcss-loader又是什麼呢，他實際上是爲咱們的css加上廠商兼容前綴的。 這裏的配置大概意思是說：我先用postcss-loader爲css加上廠商前綴，而後交給sass-loader把咱們的sass編譯爲普通css,再交給咱們的css-loader,而後再交給咱們的style-loader負責把咱們的樣式掛載到頁面上。

importLoaders: 2這個又是什麼意思呢？

咱們也許會有以下場景： 一個scss文件裏import了另外一個scss文件，那麼有可能在打包時就不會走下面的兩個loader(sass-loader,postcss-loader),而是直接走了css-loader，那麼若是咱們但願被引入的scss文件也走下面兩個loader就應該配置這個配置，讓webpack明白該怎麼作處理。

打包iconfont等字體文件

module: {
    rules: [
      {
        test: /\.(eot|ttf|svg|woff|woff2)$/,
        use: {
          loader: 'file-loader'
        }
      }]
  }
複製代碼

咱們能夠藉助file-loader對文件進行打包

Plugins

簡介

plugin能夠在webpack運行到某個時刻的時候，幫你作一些事情

HtmlwebpackPlugin

const HtmlwebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlwebpackPlugin({
    template: 'src/index.html',
    filename:'index.html'
})]
複製代碼

這裏咱們使用了一個HtmlwebpackPlugin插件 ，咱們指定了template使用哪一個文件,並指定打包後的文件名

CleanwebpackPlugin

const CleanwebpackPlugin = require('clean-webpack-plugin');
plugins: [new HtmlwebpackPlugin({
    template: 'src/index.html',
    filename:'index.html'
}),new CleanwebpackPlugin()]
複製代碼

這個CleanwebpackPlugin能夠在打包時幫咱們刪除dist文件夾下全部內容。減小了咱們手動操做的頻率

babel

咱們的項目不免要作一些兼容性處理，因此咱們要藉助babel把咱們的es6代碼轉換成es5代碼 咱們首先應該安裝@babel/preset-env和babel-polyfill依賴

module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
        options:{
            presets:[['@babel/preset-env',{
                useBuiltIns:"usage"
            }]]
        }
      }]
}
複製代碼

這塊的配置'@babel/preset-env'這個其實只是轉換es6的語法爲es5的語法，咱們還須要在main.js最上方引入babel-polyfill，這個意思是把一些es6中沒有的函數用es5所有模擬一遍， useBuiltIns:"usage"這個的意思是在模擬過程當中，只模擬咱們項目中只模擬項目中用到的es6的函數。

tree-shaking

在webpack中咱們能夠對咱們已經引入但未使用的代碼作‘搖樹’處理（不過須要注意的是這個功能只對esModule起做用） 咱們須要在package.json裏配置：sideEffects:[‘babel-polyfill’] 而後打包就能夠把除過babel-polyfill的無引用的所有都剔除掉了

code-splitting

咱們須要把打包出來的文件拆分紅好多個小文件，防止在更新代碼時一次性更新了很大的一個文件，致使用戶那邊的緩存失效,又要從新下載很大的文件

optimization: {
    runtimeChunk: {
      name: 'runtime'
    },
    splitChunks: {
      chunks: 'all',// 同步異步都打包
      cacheGroups: { 
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.js'
        }
      }
    }
  },
複製代碼

css文件代碼分割

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
這兩個插件咱們得安裝
optimization: {
    usedExports: true, // tree shaking
    minimizer: [new OptimizeCssAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].chunk.css'
    })
]
複製代碼