從零開始構建一個webpack專案

lzg9527發表於2019-10-24
Web

1、新建專案

新建一個空資料夾，用於建立專案，使用 npm init 命令建立一個 package.json 檔案。
輸入這個命令後，終端會問你一系列諸如專案名稱，專案描述，作者等資訊，也可以使用 npm init -y 這個命令來一次生成 package.json 檔案，這樣終端不會詢問你問題。

2、安裝 webpack

安裝 webapck 時把 webpack-cli 也裝上是因為在 webpack4.x 版本後 webpack 模組把一些功能分到了 webpack-cli 模組，所以兩者都需要安裝，安裝方法如下：

npm install webpack webpack-cli --global    //這是安裝全域性webpack及webpack-cli模組
npm install webpack webpack-cli --save-dev  //這是安裝本地專案模組
複製程式碼

3、新建檔案目錄

在根目錄件夾中新建兩個資料夾，分別為 src 資料夾和 dist 資料夾，接下來再建立三個檔案:此時，專案結構如下

  • index.html --放在 dist 資料夾中；
  • hello.js --放在 src 資料夾中；
  • index.js --放在 src 資料夾中；

3.1、 index.html 中寫下 html 程式碼，它的作用是為了引入我們打包後的 js 檔案：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Webpack Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
    <!--這是打包之後的js檔案，我們暫時命名為bundle.js-->
  </body>
</html>
複製程式碼

3.2、在 hello.js 中匯出一個模組：

// hello.js
module.exports = function() {
  let hello = document.createElement('div')
  hello.innerHTML = 'welcome to China!'
  return hello
}
複製程式碼

3.3、在 index.js 中引入這個模組（hello.js）:

//index.js
const hello = require('./hello.js')
document.querySelector('#root').appendChild(hello())
複製程式碼

上述操作就相當於我們把 hello.js 模組合併到了 index.js 模組，之後我們打包時就只需把 index.js 模組打包成 bundle.js 即可。

3.4、進行最簡單的 webpack 打包

// 在終端中使用如下命令進行打包：
webpack src/index.js --output dist/bundle.js
複製程式碼

上述就相當於把 src 資料夾下的 index.js 檔案打包到 dist 檔案下的 bundle.js，這時就生成了 bundle.js 供 index.html 檔案引用。現在開啟 index.html 就可以看到我們的頁面了。

4、配置 webpack.config.js

上述打包方式太 low 了，我們可以在當前專案的根目錄下新建一個配置檔案 webpack.config.js 用來配置打包方式。 webpack.config.js 配置如下

const path = require('path') // 處理絕對路徑
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口檔案
  output: {
    path: path.join(__dirname, '/dist'), //打包後的檔案存放的地方
    filename: 'bundle.js' //打包後輸出檔案的檔名
  }
}
複製程式碼

有了這個配置檔案，我們只需在終端中執行 webpack 命令就可進行打包，這條命令會自動引用 webpack.config.js 檔案中的配置選項。

5、構建本地伺服器

現在我們是通過開啟本地檔案來檢視頁面的，感覺還是有點 low。例如 vue, react 等腳手架都是在本地伺服器執行的。所以我們再做進一步優化。

5.1 webpack-dev-server 配置本地伺服器

Webpack 提供了一個可選的本地開發伺服器，這個本地伺服器基於 node.js 構建，它是一個單獨的元件，在 webpack 中進行配置之前需要單獨安裝它作為專案依賴：npm i webpack-dev-server -D

以下是devServer 的一些配置選項:

  • contentBase ：設定伺服器所讀取檔案的目錄，當前我們設定為"./dist"
  • port ：設定埠號，如果省略，預設為 8080
  • inline ：設定為 true，當原始檔改變時會自動重新整理頁面
  • historyApiFallback ：設定為 true，所有的跳轉將指向 index.html

現在我們把這些配置加到 webpack.config.js 檔案上，如下：

// webpack.config.js
const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口檔案
  output: {
    path: path.join(__dirname, '/dist'), //打包後的檔案存放的地方
    filename: 'bundle.js' //打包後輸出檔案的檔名
  },
  devServer: {
    contentBase: './dist', // 本地伺服器所載入檔案的目錄
    port: '8088', // 設定埠號為8088
    inline: true, // 檔案修改後實時重新整理
    historyApiFallback: true //不跳轉
  }
}
複製程式碼

5.2、package.json 檔案中新增啟動和打包命令

package.json 檔案修改如下

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}
複製程式碼

這樣我們就可以用以下命令進行本地執行或者打包檔案了

  • npm run dev 啟動本地伺服器，webpack-dev-server 就是啟動伺服器的命令，--open 是用於啟動完伺服器後自動開啟瀏覽器。
  • npm run build 執行打包命令

此時，我們只要輸入 npm run dev 就可以在http://localhost:8088/中檢視頁面了。

6、配置常用 loader

loader 可以讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。

Loaders 的配置包括以下幾方面：

  • test：一個用以匹配 loaders 所處理檔案的擴充名的正規表示式（必須）
  • loader：loader 的名稱（必須）
  • include/exclude：手動新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾）（可選）；
  • options：為 loaders 提供額外的設定選項（可選）

配置 css-loader 和 sass-loader

如果我們要載入一個 css 檔案，需要安裝配置 style-loader 和 css-loader。
如果我們要使用 sass，就要配置 sass-loader 和 node-sass。

  • css-loader：載入.css 檔案
  • style-loader：使用 style 標籤將 css-loader 內部樣式注入到我們的 HTML 頁面
const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口檔案
  output: {
    path: path.join(__dirname, '/dist'), //打包後的檔案存放的地方
    filename: 'bundle.js' //打包後輸出檔案的檔名
  },
  devServer: {
    contentBase: './dist', // 本地伺服器所載入檔案的目錄
    port: '8088', // 設定埠號為8088
    inline: true, // 檔案修改後實時重新整理
    historyApiFallback: true //不跳轉
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的檔案
        use: ['style-loader', 'css-loader']
      {
        test: /\.(scss|sass)$/, // 正則匹配以.scss和.sass結尾的檔案
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}
複製程式碼

配置 Babel-loader

Babel 其實是一個編譯 JavaScript 的平臺，它可以編譯程式碼幫你達到以下目的：

  • 讓你能使用最新的 JavaScript 程式碼（ES6，ES7...）；
  • 讓你能使用基於 JavaScript 進行了擴充的語言，比如 React 的 JSX；
module: {
  ...
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src')]
    }
  ]
}
複製程式碼

處理圖片

處理圖片資源時，我們常用的兩種 loader 是 file-loader 或者 url-loader。 當使用 url-loader 載入圖片，圖片小於上限值，則將圖片轉 base64 字串，否則使用 file-loader 載入圖片。

module: {
  ...
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}
複製程式碼

7、配置常用外掛

loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。

7.1、自動生成 html 檔案(HtmlWebpackPlugin)

現在我們都是使用一開始建好的 index.html 檔案，然後手動引入 bundle.js，如果以後我們引入不止一個 js 檔案，那就得更改 index.html 中的 js 檔名，所以能不能自動生成 index.html 且自動引用打包後的 js 呢？
HtmlWebpackPlugin 外掛就是用來解決這個問題的：

  1. 安裝外掛 npm i html-webpack-plugin -D
  2. 把 dist 資料夾清空
  3. 在根目錄新建 index.html,內容和原來的 html 一致，只是不引入 js 檔案。
  4. webpack.config.js 中我們引入了 HtmlWebpackPlugin 外掛
plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  })
]
複製程式碼

此時我們使用 npm run build 進行打包，你會發現，dist 資料夾和 html 檔案都會自動生成。

7.2、清理/dist 資料夾(CleanWebpackPlugin)

在每次構建前清理/dist 資料夾，生產最新的打包檔案，這時候就用到 CleanWebpackPlugin 外掛了。

  1. 安裝 npm i clean-webpack-plugin -D
  2. 配置 webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  }),
  new CleanWebpackPlugin(['dist'])
]
複製程式碼

7.3、熱更新(HotModuleReplacementPlugin)

我們要在修改程式碼後自動更新頁面，這就需要 HotModuleReplacementPlugin（HMR）外掛

  1. devServer 配置項中新增 hot: true 引數。
  2. 因為 HotModuleReplacementPlugin 是 webpack 模組自帶的，所以引入 webpack 後，在 plugins 配置項中直接使用即可。
plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  }),
  new CleanWebpackPlugin(['dist'])
  new webpack.HotModuleReplacementPlugin()
]
複製程式碼

7.4、增加 css 字首

平時我們寫 css 時，一些屬性需要手動加上字首，比如-webkit-border-radius: 10px;，在 webpack 中我們可以讓他自動加上

  1. 安裝 npm i postcss-loader autoprefixer -D
  2. 在專案根目錄下新建 postcss.config.js 檔案
module.exports = {
  plugins: [
    require('autoprefixer') // 引用autoprefixer模組
  ]
}
module.exports = {
   ...
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的檔案
        use: [
          { loader: 'style-loader' }, // 這裡採用的是物件配置loader的寫法
          { loader: 'css-loader' },
          { loader: 'postcss-loader' } // 使用postcss-loader
        ]
      }
       ...
    ]
  }
   ...
}
複製程式碼

7.5、css 分離 ExtractTextPlugin

將 css 成生檔案，而非內聯。該外掛的主要是為了抽離 css 樣式,防止將樣式打包在 js 中引起頁面樣式載入錯亂的現象。

  1. 安裝 npm i extract-text-webpack-plugin@next -D
  2. 在 webpack.common.js 檔案中引入並使用該外掛：
const ExtractTextPlugin = require('extract-text-webpack-plugin') //引入分離外掛
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的檔案
        use: ExtractTextPlugin.extract({
          // 相當於回滾，經postcss-loader和css-loader處理過的css最終再經過style-loader處理
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('css/index.css') // 將css分離到/dist資料夾下的css資料夾中的index.css
  ]
}
複製程式碼

此時執行 npm run build 後會發現/dist 資料夾內多出了/css 資料夾及 index.css 檔案。

7.6、消除冗餘 css

有時候我們 css 寫得多了，可能會不自覺的寫重複了一些樣式，這就造成了多餘的程式碼，以下方法可以優化

  1. 安裝 npm i purifycss-webpack purify-css glob -D
  2. 引入 clean-webpack-plugin 及 glob 外掛並使用
const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack外掛
const glob = require('glob') // 引入glob模組,用於掃描全部html檔案中所引用的css

plugins: [
  new PurifyCssWebpack({
    paths: glob.sync(path.join(__dirname, 'src/*.html')) // 同步掃描所有html檔案中所引用的css
  })
]
複製程式碼

至此，一些常用的配置以及弄好了，現在就開始愉快地寫程式碼了

相關文章