2. 程式人生 > 其它 >使用webpack4打造自己的前端工作流

使用webpack4打造自己的前端工作流

阿新 • • 發佈：2021-10-07

前言

webpack4釋出已經有一段時間了，我在實踐的過程中發現，很多專案配置在webpack3下工作正常，但是升級到webpack4直接就崩了，如果想要webpack4正常工作，很多外掛也需要升級到新版。下面是我使用webpack4配置的一個學習案例，包含了日常開發的常用配置項，比如多入口檔案配置、模板檔案自定義、版本號控制、js和css分離、css自動新增字首、scss轉css、圖片及字型檔案的處理、babel編譯JS語法和API等等

版本號

當我們修改程式碼後，需要重新打包檔案，這時候為了避免瀏覽器快取，往往需要為檔案新增一個版本號

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js?[hash]'
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject:'body', // 插入位置
      favicon: './favicon.ico', // icon圖示
      title: 'webpack learn', // 生成的html檔案的標題
      filename: 'index.html', // 生成的html檔名稱
      minify:{
        removeComments: false, // 刪除註釋
        collapseWhitespace: false // 刪除空格
      }
    })
  ]
}

打包後的程式碼

<!DOCTYPE html>
<html>
  <head>
    
    <title>webpack learn</title>
    <link rel="shortcut icon" href="favicon.ico">
  </head>
  <body>
  <script type="text/javascript" src="main.js?f8f60ca3f6ee44382620"></script></body>
</html>

html-webpack-plugin這個外掛會生成一個名為index.html、標題是webpack learn的檔案，並且自動把打包後的檔案插入到html中。如果不配置這個外掛，filename的預設值就是index.html，title預設是Webpack APP

inject表示插入的位置，預設是body，可選值head
favicon表示可以新增一個icon圖示
minify表示對壓縮檔案，removeComments和collapseWhitespace的預設值都是false

模板檔案

html-webpack-plugin外掛可以使用模板檔案，這樣我們就可以自定義一個html檔案，然後讓這個外掛把打包後的檔案自動插入到模板檔案中

tmp/tmp.html模板檔案

<!DOCTYPE html>
<html>
  <head>
    
    <title>template file</title>
  <body>
  <div>hello template</div>
</html>

外掛配置項

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

打包後生成的index.html

<!DOCTYPE html>
<html>
  <head>
    
    <title>template file</title>
  <body>
  <div>hello template</div>
</html>
<script type="text/javascript" src="main.js?b321307e65d6b0fbee0b"></script>

多頁面

對於多頁面一般會對應多個入口檔案，不同的html頁面輸出對應不同的入口檔案，html-webpack-plugin外掛支援配置多頁面。多頁面需要配置chunks和excludeChunks，chunks表示所包含的入口檔案，excludeChunks表示要排除的入口檔案

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    a: './src/main-a.js',
    b: './src/main-b.js',
    c: './src/main-c.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js?[hash]'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'a.html',
      template: './tmp/tmp.html',
      chunks: ['a'] // 載入a對應的打包檔案
    }),
    new HtmlWebpackPlugin({
      filename: 'b.html',
      template: './tmp/tmp.html',
      chunks: ['b']  // // 載入b對應的打包檔案
    }),
    new HtmlWebpackPlugin({
      filename: 'c.html',
      template: './tmp/tmp.html',
      excludeChunks: ['a', 'b'] // 載入非a、b對應的打包檔案
    })
  ]
}

執行結果

<!-- a.html -->
<!DOCTYPE html>
<html>
  <head>
    
    <title>webpack learn</title>
  <body>
  <div>hello template</div>
</html>
<script type="text/javascript" src="a.js?82a9a04389852053c167"></script>

<!-- b.html -->
<!DOCTYPE html>
<html>
  <head>
    
    <title>webpack learn</title>
  <body>
  <div>hello template</div>
</html>
<script type="text/javascript" src="b.js?82a9a04389852053c167"></script>

<!-- c.html -->
<!DOCTYPE html>
<html>
  <head>
    
    <title>webpack learn</title>
  <body>
  <div>hello template</div>
</html>
<script type="text/javascript" src="c.js?82a9a04389852053c167"></script>

內聯

除了以連結的形式引入入口檔案，也可以內聯到頁面中。html-webpack-inline-source-plugin外掛專門用來處理入口檔案內聯的

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js?[hash]'
  },
  plugins: [
    new HtmlWebpackPlugin({
      inlineSource: '.(js|css)$' // 所有的js和css檔案內聯引入
    }),
    new HtmlWebpackInlineSourcePlugin()
  ]
}

babel

babel可以把es最新標準的程式碼轉為es5程式碼，首先需要安裝babel-core核心程式，及babel-loader

npm i babel-loader babel-core -D

由於ES每年會發佈一個新版本，所以在進行轉換時，需要選擇從哪個標準進行轉換，可供選擇的有'es2015'、'es2016'、'es2017'、'latest'、'env'等多個不同的標準。

babel-preset-env標準是使用最多的，babel-preset-env在沒有任何配置選項的情況下，與 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一起）的行為完全相同

npm i babel-preset-env  -D

var webpack = require('webpack');
var path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js?[hash]'
  },
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
          cacheDirectory: true
        }
      }
    }]
  }
}

rules屬性中配置的exclude表示node_modules資料夾不需要babel進行轉換。也可以配置一個include選項，比如include: path.resolve(__dirname, 'src')，表示只有src資料夾中的檔案需要轉換

cacheDirectory選項的預設值是false，設定為true將快取 loader 的執行結果，加快編譯速度

API轉換

babel預設只轉換JavaScript語法，對於新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等是不會轉換的。如果需要轉換API，需要使用babel-polyfill，babel-polyfill是一個全域性墊片

npm i babel-polyfill -D

入口檔案引入babel-polyfill

// main.js
import 'babel-polyfill';
let set = new Set([1,2,3]);

babel-polyfill是一個全域性墊片，開發中更常用的是babel-plugin-transform-runtime這個區域性墊片，因為它可以使包的體積更小

npm i babel-plugin-transform-runtime babel-runtime -D

var webpack = require('webpack');
var path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js?[hash]'
  },
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
          cacheDirectory: true,
          plugins: ['transform-runtime']
        }
      }
    }]
  }
}

CSS

處理css會用到css-loader和style-loader，css-loader用於讀取並載入css檔案，style-loader將它插入到頁面中

// main.js
require('./assets/styles/cssdemo.css');

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js?[hash]'
  },
  module: {
    rules:[{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({})
  ]
}

自動字首

由於各大瀏覽器對CSS相容性不同，部分CSS特性需要加上瀏覽器字首才能正常工作，postcss-loader可以幫我們自動完成加字首的工作

npm i postcss-loader autoprefixer postcss-import -D

module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', {
        loader: 'css-loader',
        options: { importLoaders: 1 }
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            require('postcss-import'), // 解決css中import其他css
            require('autoprefixer')
          ]
        }
      }
    ]
  }]
}

sass

需要安裝sass-loader及node-sass。

npm i sass-loader node-sass -D

module: {
  rules: [{
    test: /\.scss$/,
    use: ['style-loader','css-loader',
      {
        loader: 'postcss-loader',
        options: { plugins: [require('autoprefixer')] }
      },
      'sass-loader'
    ]
  }]
}

分離css

預設情況下，CSS會被打包到入口JS檔案中。如果需要把CSS分離出來，需要使用extract-text-webpack-plugin外掛

npm i extract-text-webpack-plugin@next -D

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js?[hash]'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader',
          {
            loader: 'postcss-loader',
            options: { plugins: [require('autoprefixer')] }
          },
          'sass-loader'
        ]
      })
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({}),
    new ExtractTextPlugin('main.css')
  ]
}

圖片資源

webpack處理圖片、字型、音樂、視訊等資源時，需要安裝file-loader

npm i file-loader -D

// main.js
require('./assets/styles/cssdemo.css');

/* cssdemo.css */
body {
  background: url('../images/dog.jpg') no-repeat;
}
h1 {
  color: red;
}

module: {
  rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }, {
      test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
      loader: 'file-loader'
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
      loader: 'file-loader',
      query: {
        name: '[name].[ext]?[hash]'
      }
    }
  ]
}

如果是在html模板中，通過img標籤引入圖片，需要使用${require('')}將相對路徑包裹一次

<img src="${require('../src/images/dog.jpg')}" alt="">

第三方庫

比如說我們通過npm安裝了jQuery，只需要通過provide-plugin外掛就可以自動載入模組，而不必到處 import 或 require

npm i provide-plugin -D

var ProvidePlugin = require('provide-plugin');

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
]

在專案中使用

console.log($('#box'), jQuery('#box'))

如果是把jQuery儲存到了本地，可以通過設定別名來引用

resolve:{
　alias:{
　　jQuery$: path.resolve(__dirname,'src/libs/jquery.min.js')
　}
}

實用配置

最後基於上面的所有介紹，把所有的配置綜合到一起。由於程式碼比較多，就不再這裡展開了，我把示例程式碼放到了GitHub

webpack-demo
Blog

執行結果

參考文章

Babel 入門教程
webpack實用配置
babel-preset-env使用方法

部落格: https://blog.86886.wang
GitHub: https://github.com/wmui

相關推薦

使用webpack4打造自己的前端工作流

前言 webpack4釋出已經有一段時間了，我在實踐的過程中發現，很多專案配置在webpack3下工作正常，但是升級到webpack4直接就崩了，如果想要webpack4正常工作，很多外掛也需要升級到新版。下面是我使用webpack4配置的

前端工作流規範

一. 專案版本規範(或API元件開發) 專案的版本號推薦使用語義化版本規範(https://semver.org/lang/zh-CN/), 其基本規則如下:

前端規範之Git工作流規範（Husky + Comminilint + Lint-staged）

程式碼規範是軟體開發領域經久不衰的話題，幾乎所有工程師在開發過程中都會遇到或思考過這一問題。而隨著前端應用的大型化和複雜化，越來越多的前端團隊也開始重視程式碼規範。同樣，前段時間，筆者所在的團隊也開展

關於找前端工作的那點事之一（乾貨）

     最近有很多朋友找我幫他們改簡歷，對於多年混跡與各個公司跳槽的我來說，真的是比較無語的，由於疫情期間，導致本來在3月份，4月份跳槽的黃金期，推遲到了5月份、6月份，感覺朋友們都是對上一家公司忍了很久

Java基於jeeplus vue實現簡單工作流過程圖解

jeeplus 是一款基於程式碼生成器的快速開發平臺。 前後端分離、maven多模組開發，方便多人協同開發

.NET 開源工作流: Slickflow流程引擎高階開發(七)--訊息佇列(RabbitMQ)的整合使用

前言：工作流流程過程中，除了正常的人工審批型別的節點外，事件型別的節點處理也尤為重要。比如比較常見的事件型別的節點有：Timer/Message/Signal等。本文重點闡述訊息型別的節點處理，以及實現訊息驅動流程過程中

azkaban工作流排程器

1、用途 一個完整的資料分析系統通常都是由大量任務單元組成： shell指令碼程式，java程式，mapreduce程式、hive指令碼等

OpenStack 工作流元件： Mistral

1 Mistral 簡介 Mistral 是由 Mirantis 開發，貢獻給 OpenStack 社群的工作流元件，它提供 Workflow As a Service 服務。

Activiti7工作流的使用

Activiti服務架構 概述 activiti-cfg.xml activiti-cfg.xml是activiti的引擎配置檔案，包括：ProcessEngineConfiguration的定義、資料來源的定義、事務管理器等，此檔案其實就是一個Spring配置檔案，下面是一個基本

工作流二次開發之新增表單實踐(二)

再接上篇，目前基本已完成工作流表單屬性的自增和頁面調整工作；現將步驟和關鍵程式碼總結如下：

使用vue-cli4快速搭建專案環境、使用webpack4打包自己的library類庫、封裝vue外掛併發布

快速建立 使用官方推薦的vue-cli建立專案如下： # 安裝 Vue Cli npm install -g @vue/cli

關於在IDEA中SpringBoot專案中activiti工作流的使用詳解

記錄一下工作流的在Springboot中的使用,，順便寫個demo，概念，什麼東西的我就不解釋了，如有問題歡迎各位大佬指導一下。

flowable工作流適配KingbaseES V8

目前，flowable支援mysql、postgreSQL、DB2、Oracle等資料庫，官方暫不支援國產資料庫KingbaseES。因專案需要，嘗試修改flowable 6.4支援KingbaseES V8，配置方法如下文。

提升團隊幸福感之：整合 GitLab && JIRA 實現自動化工作流

佛羅倫薩 - 聖母百花聖殿（圖） 前言 GitLab 和 Jira 是平時開發過程中使用非常高頻的程式碼管理系統（開發人員）和專案管理系統（專案管理），通過兩套系統的協作完成平常大多數的功能開發，但是兩套系統在沒有整合

打造自己的系統許可權控制

前情提要 　　最近老大分配了一個專案，開發一個給客戶用的後臺系統，要求是除了使用者需要的應用功能以外還要有許可權控制功能。

Centos7安裝jdk和maven的工作流

第一步：下載基礎資源：centos7映象、jdk1.8 和 maven3.6(提供一個國內源：http://apache.apooloo.cn/#/down/f1b54d77df533af9d9de55cf3f4e2cea)

SAP Cloud for Customer使用工作流(workflow)實現郵件自動通知功能

In release 1708 the Recipient Determination to “Reporting Line Manager” in Opportunity is available:

activity(工作流）初步學習記錄

1.概念 　 工作流(Workflow)，就是“業務過程的部分或整體在計算機應用環境下的自動化”，它主要解決的是“使在多個參與者之間按照某種預定義的規則傳遞文件、資訊或任務的過程自動進行，從而實現某個

odoo12 修行基礎篇之 新增工作流和操作記錄 （四）

這一篇我們先說下如何新增操作記錄。 其實就是一個固定的流程： 1、在my_customer_complain.py中繼承三個類

工作流引擎Activiti與SpringBoot2整合--開源軟體誕生17

開源ERP技術整合系列--第17篇 用日誌記錄“開源軟體”的誕生 【點亮星標】----祈盼著一個鼓勵