1、關於plugin

什麼是 plugin

• plugin 是外掛的意思，通常是用於對某個現有的架構進行擴充套件
• webpack 中的外掛，就是對 webpack 現有功能的各種擴充套件，比如打包優化，檔案壓縮等

loader 和 plugin 區別

• loader 主要用於轉換某些型別的模組，它是一個轉換器
• plugin 是外掛，它是對 webpack 本身的擴充套件，是一個擴充套件器

plugin 的使用過程

1. 通過 npm 安裝需要使用的 plugins (某些 webpack 已經內建的外掛不需要安裝)
2. 在 webpack.config.js 中的 plugins 中配置外掛

2、新增版權的plugin：BannerPlugin

BannerPlugin 屬於 webpack 自帶的外掛，可以為打包的檔案新增版權宣告

修改 webpack.config.js 的檔案：

重新打包程式，檢視 bundle.js 檔案的頭部，可以看到如下資訊：

3、打包html的plugin：HtmlWebpackPlugin

目前，我們的 index.html 檔案是存放在專案的根目錄下的，但在真實發布專案時，釋出的是 dist 資料夾中的內容，

而 dist 資料夾中如果沒有 index.html 檔案，那麼打包的 js 等檔案也就沒有意義了；

所以，我們需要將 index.html 檔案打包到 dist 資料夾中，這個時候可以使用 HtmlWebpackPlugin 外掛；

HtmlWebpackPlugin 外掛可以為我們做這些事情：

• 自動生成一個 index.html 檔案(可以指定模板來生成)
• 將打包的 js 檔案，自動通過 script 標籤插入到 body 中

安裝 HtmlWebpackPlugin 外掛:

npm install [email protected] --save-dev

修改 webpack.config.js 檔案中 plugins：

需要刪除(註釋)之前在 output 中新增的 publicPath 屬性 ：

修改模板 index.html

上面的 template 表示根據什麼模板來生成 index.html，這裡表示的是和 webpack.config.js 在同一目錄的 index.html，由於 HtmlWebpackPlugin 外掛會將打包的 js 檔案，

自動通過 script 標籤插入到 body 中，所以我們要去掉模板 index.html 中的多餘部分:

重新打包執行，會發現 dist 目錄中多了一個 index.html 檔案：

4、js壓縮的Plugin：uglifyjs-webpack-plugin

在專案釋出之前，我們必然需要對 js 等檔案進行壓縮處理，

對打包的js檔案進行壓縮，可以使用一個第三方的外掛 uglifyjs-webpack-plugin，並且版本號指定 1.1.1，和 CLI2 保持一致，

安裝 uglifyjs-webpack-plugin：

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置：

重新打包後，檢視bundle.js，已經被壓縮了：

5、搭建本地伺服器

webpack 提供了一個可選的本地開發伺服器，這個本地伺服器基於 node.js 搭建，內部使用 express 框架，可以實現讓瀏覽器自動重新整理

顯示我們修改後的結果，不過它是一個單獨的模組，在webpack中使用之前需要先安裝它；

安裝 webpack-dev-serve：

npm install --save-dev webpack-dev-server@2.9.1

webpack.config.js 檔案配置修改，：

devserver 也是作為 webpack 中的一個選項，選項本身可以設定如下屬性：

• contentBase：為哪一個資料夾提供本地服務，預設是根資料夾，我們這裡要填寫./dist
• port：埠號
• inline：頁面實時重新整理
• historyApiFallback：在SPA頁面中，依賴HTML5的history模式

此時，可以通過命令：webpack-dev-server 啟動伺服器了

配置 package.json 中的 scripts，簡化啟動伺服器的命：

如果寫為： "dev": "webpack-dev-server –open"

--open引數表示直接用預設瀏覽器開啟

執行命令 nmp run dev 啟動伺服器, 在瀏覽器中開啟相應的URL即可：

搭建本地伺服器用於開發階段除錯；

6、webpack配置分離

由於我們目前所有的生產環境程式碼和釋出環境程式碼都寫在 webpack.config.json 中，這樣當我們在編譯的時候，

會將生產環境程式碼和釋出環境程式碼一起編譯，但有時候我們希望將二者分開編譯；

這時候，將生產環境程式碼和釋出環境程式碼抽離出來顯得很有必要

新建一個資料夾 build，在 build 中新建三個檔案：

base.config.js：公共部分配置

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只負責將css檔案進行載入
        // style-loader負責將樣式新增到DOM中
        // 使用多個loader時, 是從右向左
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 當載入的圖片, 小於limit時, 會將圖片編譯成base64字串形式.
              // 當載入的圖片, 大於limit時, 需要使用file-loader模組進行載入.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最終版權歸ming所有！'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
}

dev.config.js：開發部分配置

module.exports = {
  devServer: {
    contentBase: './dist',  //服務監聽的資料夾
    inline: true, //是否自動重新整理
    port: 8888
  }
}

prod.config.js：生產部分配置

const UglifyjswebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyjswebpackPlugin(),
  ],
}

安裝對配置檔案合併的外掛：webpack-merge

npm install webpack-merge --save-dev

修改配置檔案，新增合併配置：

dev.config.js

prod.config.js

修改 package.json 檔案，指定配置檔案

在 base.config.js 中的 output 中的檔案拼接路徑是 'dist'，表示的是從當前路徑下拼接，也就是built/dist ，

所以要改為../dist，不然打包的檔案就會在built/dist 中了；

此時可以執行npm run build 或者npm run dev測試；