和我一塊兒學習Webpack4.0（二） —— Webpack核心

1、Loader

1.什麼是Loader？

Loader是一種打包方案，webpack不知道除了.js後綴結尾的其餘文件該怎麼打包，因此要使用Loader來告訴webpack。

要使用Loader首先要進行安裝，而後在webpack.config.js裏進行配置，相似這樣：

npm install url-loader -D

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  modules: {
    rules: [{
      test: /\.png$/,
      use: 'url-loader'
    }]
  }
};

2.圖片打包(file-loader, url-loader)

file-loader的做用是將文件進行處理後，移動到打包後的文件夾中。通常用來處理圖片文件。
url-loader至關於file-loader的升級版，能夠將圖片地址用base64的形式返回。

首先安裝：

npm install file-loader url-loader -D

配置webpack.config.js：

module: {
  rules: [{
    test: /\.png$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: '[name]-[hash].[ext]',
      outputPath: 'image/'
    }
  }]
}

這個示例是指匹配以.png結尾的文件，使用url-loader，limit表明小於這個byte的圖片將打包爲base64並直接插入js代碼中，而大於這個值的圖片將以文件的形式打包到指定文件夾。name配置指的是以什麼形式顯示打包後的文件夾名，有不少配置項可在官網中查看，[name]是指原文件名，[hash]是哈希值，[ext]是原後綴名。outputPath就是打包後的指定位置。

3.樣式打包(css-loader, style-loader)

css-loader的做用是分析各個css文件間的關係，而後合併成一個css。
style-loader的做用是將這個處理後的css掛載到頁面的head裏。

安裝：

npm install css-loader style-loader -D

配置webpack.config.js：

module: {
  rules: [{
    test: /\.css$/,
    loader: ['style-loader', 'css-loader']
  }]
}

若是項目中用到sass、less、stylus等css擴展語言，以sass爲例，則須要安裝sass-loader，node-sass：

npm install sass-loader node-sass -D

配置webpack.config.js：

module: {
  rules: [{
    test: /\.scss$/,
    loader: ['style-loader', 'css-loader', 'sass-loader']
  }]
}

在webpack的配置中，loader是有執行順序的，從右到左（或從下到上）依次執行，首先由sass-loader將sass轉爲css，而後css-loader處理css文件間的關係，最後由style-loader掛載到頁面中。

4.字體打包(file-loader, url-loader)

字體打包的過程和圖片很是相似，只是稍微改一下配置就能夠了：

module: {
  rules: [{
    test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
    loader: 'url-loader'
  }]
}

2、Plugins

Plugins能夠在webpack運行到某一時刻的時候，幫咱們作一些事情。

1.Html-webpack-plugin

咱們每次打包的時候，入口的html文件並無被打包到指定文件夾中，因此咱們須要藉助這個plugins來幫咱們作這件事。

npm install html-webpack-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.png$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: '[name].[ext]'
      }
    },{
      test: /\.scss$/,
      loader: ['style-loader', 'css-loader', 'sass-loader']
    },{
      test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
      loader: 'url-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

若是指定template就會把本來的html加入一個script標籤而後打包，若是不指定這個plugins就會在打包後的文件夾中自動生成一個html文件。

2.clean-webpack-plugin

這個plugin能夠在打包前把舊的打包文件夾刪除掉。

npm install clean-webpack-plugin -D

plugins: [
  new HtmlWebpackPlugin({
    template: './index.html'
  }),
  new CleanWebpackPlugin()
]