淺談webpack構建工具配置和常用外掛總結

阿新 • • 發佈：2020-05-13

webpack構建工具已經火了好幾年，也是當下狠火狠方便的構建工具，我們沒有理由不去學習。既然選擇webpack就要跟著時代走，我們要追隨大牛的步伐，大牛等等我。

一、webpack基礎

在根目錄使用npm init 命令建立package.json，建立過程中一路回車。
本地安裝webpack命令：npm install webpack webpack-cli --save-dev 安裝成功後寫入package.js的devDependencies中，可以通過 npm node_modules/.bin/webpack -v 命令檢視它的版本。
全域性安裝npm install -g webpack 不推薦全域性安裝 webpack。它會把你的專案鎖定全域性安裝的版本，也可能導致不同的webpack版本中構建失敗。

靜態資原始檔目錄

– src [ 專案原始檔目錄 ]
– dist [ 打包檔案目錄 ]
– webpack.config.js [ webpack配置檔案 ]
– package.json [ NPM包管理配置檔案 ]
– node_modules [ 專案中的依賴存放目錄 ]

二、webpack.config.js

const webpack = require('webpack');
module.exports = {
 mote:"development",//指當前的環境
 /*
 development：開發環境
 production:生產環境
 none:不做任何處理
 */
 //入口檔案，如果需求多個入口可改為物件
  entry: './src/index.js',/*
  hot配置是否啟用模組的熱替換功能，devServer的預設行為是在發現程式碼被改後通過自動重新整理整個頁面來做到事實預覽，然後設定hot後，
  會在不重新整理整個頁面的情況下用新模組替換老模組來做到實時更新。
  如果選用hot：true方式來達到熱更新的效果需要引用webpack.HotModuleReplacementPlugin外掛配合達到你需要的效果，另外推薦一
  種簡便的方式在package.json中scripts設定如下
  "scripts": {
   "start": "webpack-dev-server --hot --inline",},*/
  // 伺服器環境
  devServer: {
   hot: true,//建議使用第二種方案 啟動服務使用命令 npm run start
   port:"8080",//埠預設8080,可以自行設定
   host:"192.168.xx.xx",/*
   host配置devServer服務監聽的地址，也可以使用localhost進行訪問 瀏覽器輸入192.168.xx.xx/index.html
   簡便方法在package.json中設定如下
   "scripts": {
   "start": "webpack-dev-server --hot --inline ",*/
   
  },//外掛
  plugins: [
   //熱載入外掛
   new webpack.HotModuleReplacementPlugin(),],//輸出
  output: {
   //filename：輸出的檔名，可以自定義一些規則
   filename: '[name].bundle.js',//path，配置輸出檔案存放在本地的目錄
   path: path.resolve(__dirname,'dist')
  }
 };

三、外掛

1、HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
  new HtmlWebpackPlugin({ // 打包輸出HTML
   title: 'Hello World',//檔案的標題
   minify: { //minify 的作用是對 html 檔案進行壓縮
    removeComments: true,// 移除HTML中的註釋
    collapseWhitespace: true,// 刪除空白符與換行符
    minifyCSS: true,// //是否壓縮html裡的css 預設值false；
    caseSensitive: true,//是否對大小寫敏感，預設false
    ollapseWhitespace: true,//是否去除空格，預設false
    minifyJS: true,//是否壓縮html裡的js
    removeAttributeQuotes: true,//是否移除屬性的引號 預設false
    removeComments: true,//是否移除註釋 預設false
    emoveCommentsFromCDATA: true,//從指令碼和樣式刪除的註釋 預設false
    emoveEmptyAttributes: true,//是否刪除空屬性，預設false
    removeRedundantAttributes: true,//刪除多餘的屬性
    removeScriptTypeAttributes: true,//刪除script的型別屬性，在h5下面script的type預設值：text/javascript 預設值false
   },filename: 'index.html',//輸出的html的檔名稱
   template: 'index.html',//html模板在的檔案路徑
   hash: true,//hash作用是給生成的js檔案一個獨特的hash值，預設值為false 被構建過後的html引用js效果如下
   // <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
  }),]

2、CleanWebpackPlugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
  //該外掛主要用於自動刪除webpack裡dist目錄中已不需要的檔案
  new CleanWebpackPlugin()
]

官方介紹：

By default,this plugin will remove all files inside webpack's output.path directory,as well as all unused webpack assets after every successful rebuild

3、ExtractTextWebpackPlugin

先把我們需要的東西下載好

npm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev

首先配置webpack，先不使用外掛完成

module.exports = {
 module : {
    rules: [
      {
        test: /\.css$/,use:[
          { loader: "style-loader" },{ loader: "css-loader" }
        ]
      }
    ]
  }
}

配置好之後在js入口檔案中引入樣式檔案，打包檢視打包結果bundle.js，會發現css被打包到了js裡面，以字串的形式存在。如果index.html中已引入打包後的bundle.js，使用瀏覽器開啟index.html檔案會發現css以style的形式被插到了head當中。

2.使用外掛

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 module : {
  rules: [
    {
      test: /\.css$/,use : ExtractTextPlugin.extract({
       fallback: "style-loader",use: "css-loader"
      })
    }
    /*
  use: 指需要什麼樣的loader去編譯檔案
  fallback: 編譯後用什麼loader來提取css檔案
  */
   ]
 },plugins: [
   new ExtractTextPlugin("styles.css"),new HtmlWebpackPlugin({ // 關於HtmlWebpackPlugin上文有提到
      title: 'extract-text-webpack-plugin',template: path.resolve(__dirname,'index.html'),inject : 'head'
    })
 ]
}

以上內容配置好之後打包檢視，可以發現css檔案以link的方式被引在index.html的head中。期間配合HtmlWebpackPlugin外掛自動插入index.html中

到此這篇關於淺談webpack構建工具配置和常用外掛總結的文章就介紹到這了,更多相關webpack構建工具配置和常用外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！