webpack入門學習手記（四）

siberiawolf0307發表於2018-12-30
Web

本人微信公眾號：前端修煉之路，歡迎關注。

再過一天，就是2019年了，在這裡祝大家新年快樂，闔家歡樂，萬事大吉。???

在文章之前，簡單的回顧一下2018主要完成的事情，與君分享，共同進步。???

  • 堅持健身?。這一年第一次堅持下了健身，每週最少1-2次。
  • 取得駕照?。這一年成為了合法的駕駛員，並擁有了人生第一輛私家車。
  • 考入燕大?‍?‍。這一年成功考入燕山大學繼續教育學院專升本，為進一步提升學歷打下基礎。
  • 完成專案?‍?‍。這一年在家待業成為常態，期間接了私活，首次以個人能力完成專案。
  • 原創文章✍️。這一年開啟了原創文章的寫作，釋出在微信公眾號、SegmentFault、掘金上。
  • 學會滑雪?。這一年學會了單板滑雪，實現了多年前的願望。

以下是正文。

管理輸出

之前的文章學習瞭如何載入資源，這一節學習如何將資源輸出。

對專案做一些修改，建立一個js檔案。

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}
複製程式碼

在程式入口檔案中，引用這個檔案。這個檔案的內容，對上一節的程式碼做了修改。只保留了載入css樣式的程式碼。

src/index.js

import _ from 'lodash';
import printMe from './print.js'
import './style.css';

function component() {
  let element = document.createElement('div');
  let btn = document.createElement('button');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  // add a button to print log
  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

document.body.appendChild(component());
複製程式碼

修改配置檔案，將新增加的檔案進行打包。

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'   // 也可以不打包這個檔案，因為在index.js中已經引入了
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  }
};
複製程式碼

這時，配置檔案的entry入口，改成了物件形式，允許傳入多個檔案。其中的物件屬性名app和print，在輸出檔案屬性output.filename中以佔位符[name]的形式展示。

因為載入了css，所以新增了相應的loader。

注意：

其實在入口檔案中，可以不將src/print.js檔案打包，因為在打包生成的dist/app.bundle.js檔案中，已經包含了src/print.js檔案中的內容。

在頁面檔案中引用新打包好的檔案。

dist/index.html

<!doctype html>
  <html>
    <head>
      <title>Output Management</title>
      <script src="./print.bundle.js"></script>
    </head>
    <body>
      <script src="./app.bundle.js"></script>
    </body>
  </html>
複製程式碼

最後執行打包命令npm run build之後，會在dist目錄發現新生成的打包檔案。

新增外掛

現在設想一下，假如修改了原始檔案index.js和print.js的名字，該怎麼辦呢？難道手動一個個去修改檔名嗎？如果檔案數量擴大到20個呢？

通過webpack外掛可以很自動化的完成上面的需求。

新增html-webpack-plugin和clean-webpack-plugin這兩個外掛。第一外掛是用來生成html頁面的，會自動將output.filename輸出檔案新增到頁面中。第二個外掛是用來清理/dist目錄的，防止專案目錄過於雜亂。

首先安裝這兩個外掛

npm install --save-dev html-webpack-plugin clean-webpack-plugin
複製程式碼

然後修改配置檔案，引用這兩個外掛。

webpack.config.js

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

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'   // 也可以不打包這個檔案，因為在index.js中已經引入了
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins:[
    new HtmlWebpackPlugin({title: 'Output Management'}),
    new CleanWebpackPlugin(['dist'])
  ]
};
複製程式碼

在plugins中，以陣列的形式，新增了這兩個外掛。html-webpack-plugin接受的title屬性，就是生成的html頁面中title。clean-webpack-plugin接受的引數，就是要清理的目錄名稱。

現在如果執行打包命令npm run build，會發現webpack先刪除了dist目錄，然後生成相應的檔案。如果開啟index.html檔案，會發現我們在header部分引入的js檔案，已經被webpack移動到了body。說明我們的配置檔案生效了。

這樣的話，就解決了上面提到的問題，以後檔名字修改之後，只需要修改配置檔案中相應名字，然後執行打包命令就可以了。

說明： 我將本小節程式碼託管到了騰訊雲開發者平臺，如果需要檢視這節內容，請查詢Output Management目錄即可。

以上就是指南手冊中的Output Management部分。總結一下主要內容：

  • 打包多個入口檔案，並輸出到相應的檔案中。
  • 通過外掛自動化生成html頁面，並新增相應引用檔案。
  • 通過外掛清理專案檔案。

下一篇筆記整理webpack官方文件的指南手冊剩餘部分，敬請關注。

（待續）

相關文章

webpack入門學習手記（一）

webpack入門學習手記（二）

webpack入門學習手記（三）

webpack入門學習手記（四）

相關文章