Webpack —— 前端工程化（構建篇）

時間 2019-11-08

標籤 webpack 前端工程構建简体版

原文原文鏈接

Webpack一直是前端開發不能缺乏的重要工具，當中不少經常使用的組件配置，每每都沒有一個全局的認識和系統的學習，這篇文章旨在記錄webpack中一些經常使用的插件、配置、優化方案，做一個基礎的總結。javascript

關於腳手架

插件

html-webpack-plugin

描述：模版處理插件，協助將打包壓縮的文件名、路徑插入模版當中css

原理：將webapck中entry配置的chunk或抽取的公共樣式，插入到提供的template模版中，生成一個html文件；將樣式的link插入head標籤中，script插入head或body中。html

經常使用參數與使用示例：前端

import HtmlWebpackPlugin from 'html-webpack-plugin'

const config = {
  ...otherConfig,
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'), // 本地模版文件地址，會接受模版loader解析，默認爲ejs-loader 
      filename: 'index.html', // 相對output.path輸出文件名或路徑，能夠指定輸出目錄
      templateContent: '<html></html>', // 不與template共存，可爲function，返回html字符串
      inject: true, // 爲false不注入靜態文件，爲head將js注入head，爲true或body將js注入body底部
      chunks: 'all', // 方便多個模版時，注入不一樣的chunk，字符串數組
      excludeChunks: '', // 排除注入的chunk
      showErrors: true, // 默認true，將錯誤信息輸出到頁面中
      minify: html-minifier插件配置，壓縮html文件
      xhtml: true, // 渲染的標籤自閉合
      ['custom_params']: 'xxx', // 能夠自定義參數名稱，均可以在模版內使用模版語法訪問到
    }),
    new HtmlWebpackPlugin({}) // 多個模版直接寫多個plugin就行
  ]
}
複製代碼

有了這些配置參數，足以常規的配置選項了，接下來再看下咱們對應的模版內須要如何使用HtmlWebpackPlugin的自定義參數。java

<!DOCTYPE html>
<html style="font-size:20px">
<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
    <% } %>
</head>
<body>
<div id="app">這裏面沒啥好看的，看下面的參數介紹</div>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
</body>
</html>
複製代碼

模版文件內能夠看出來，咱們總體使用的是一個htmlWebpackPlugin參數，經過這個參數能夠訪問模版編譯時的webpack對象，也能夠訪問options內，咱們自定義的參數。那這個對象具體有哪些可訪問參數，能夠看看下面這個參數示意。webpack

var templateParams = {
    compilation: compilation, // 編譯對象
    webpack: compilation.getStats().toJson(), // stats
    webpackConfig: compilation.options, // webpack配置，如：webpackConfig.output.publicPath
    htmlWebpackPlugin: {
      files: { // 配置的chunk與抽取的css樣式
        css: ['index.css'],
        js: ['common.js', 'index.js'],
        chunks: {
          common: {
            entry: 'common.js',
            css: ['index.css'],
          },
          index: {
            entry: 'index.js',
            css: ['index.css']
          }
        }
      },
      options: self.options // 傳遞給插件的自定義參數，如：title
    }
}
複製代碼