前端工程化之推開webpack世界的大門

前言

在前端開發領域已有四年多了，從第三年開始獨立負責項目，到現在大大小小的項目已有很多，從剛開始的angular1.x到vuejs再到react，前端經常使用的三大框架都有接觸。用過的人都知道這三個框架的使用都離不開webpack，從本地開發到線上部署，webpack給咱們帶來了很大的方便，因此說精通webpack是現現在前端的必備技能之一。

wepback基本知識

先來張思惟導圖，內容不太全後續會繼續更新。

簡單的說webpack就是一個模塊打包器，可是它具有但功能不只僅是打包，圖片壓縮，語法轉換，開發工具等等，總的說來webpack是前端工程師實現前端架構一個構建工具，有了webpack能讓咱們前端架構更快更合理的實現。

功能

• 轉換語法：如typescript/vue/jsx/es6等語法轉換成瀏覽器識別的語法
• css預處理：
• 代碼壓縮混淆：提升了項目的性能以及代碼的安全性（對比未混淆以前的項目混淆後源碼至關於不可見）。
• 圖片壓縮
• 提高代碼可維護性：代碼更統一（如用eslint配合約束代碼）。
• 提高開發效率：各類開發工具，方便前端工程師本地開發聯調。

核心概念

• 入口：指示webpack應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。
• 輸出：指示webpack在哪裏輸出它所建立的 bundles。
• loader：loader 讓 webpack 可以去處理那些非 JavaScript 文件。
• 插件：webpack功能的擴展，能夠用來處理各類各樣的任務。

基本使用方式

初始化

• 安裝nodejs
• 新建項目目錄
• 初始化package.json

npm init
複製代碼

• 安裝webpack等相關依賴

配置

• 入口的配置,是在webpack.config.js的modules中的entry,定義wepack的入口文件

module.exports = {
  //入口文件的路徑
  entry: './index.js'
};
複製代碼

• 能夠配置多入口

module.exports = {
  //入口文件的路徑
  entry:{
     home: "./home.js",
     about: "./about.js",
     contact: "./contact.js"
  }
};
複製代碼

• loader（module）配置,loader的配置是在webpack.config.js的modules中的test 屬性，用於標識出應該被對應的 loader進行轉換的某個或某些 文件。另外use 屬性，表示進行轉換時，應該使用哪一個 loader。

const path = require('path');

const config = {
  output: {
    filename: 'test.txt.bundle.js'
  },
  //loader定義
  module: {
    rules: [
    //test中能夠傳入正則來匹配
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;
複製代碼

注：loader的做用簡單來講就是將本地文件（vue，jsx，ts）轉換成瀏覽器識別的文件,即loader 用於對模塊的源代碼進行轉換。

• plugin 配置插件,插件的配置是在webpack.config.js的plugins中的，例如：

plugins:[
        //自動生成html文件
        new HtmlWebpackPlugin({
            title: 'html management'
        }),
    ],
複製代碼

注：插件主要是webpack功能的擴展，好比自動生成html，本地服務器...

• output配置文件輸出路徑,輸出的配置是在webpack.config.js的modules中的output對象中,定義文件輸出的位置，例如：

output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist'),
        //該配置能幫助你爲項目中的全部資源指定一個基礎路徑,正常會設置爲根目錄
        publicPath:'/'
    },
複製代碼

• resolve配置模塊解析，這些選項能設置模塊如何被解析。resolver是一個庫(library)，用於幫助找到模塊的絕對路徑。一個模塊能夠做爲另外一個模塊的依賴模塊，而後被後者引用。靈位resolve有如下經常使用屬性：

//1.ailas：建立 import 或 require 的別名，來確保模塊引入變得更簡單
//2.extensions：自動解析肯定的擴展。默認值爲[".js", ".json"]
//3.modules：告訴 webpack 解析模塊時應該搜索的目錄。
//4.plugin：應該使用的額外的解析插件列表。
resolve:{
    ailas:{
        component:path.resolve(__dirname, 'src/component/')
    },
    extensions:[".json",'.jsx','.js'],
    module:['node_modules'],
    plugins:[
    //提供全局的變量，在模塊中使用無需用require引入
    new webpack.ProvidePlugin({
      $: "jquery"
    })
    ]
}
複製代碼

運行

• 爲了方便開發，咱們會根據當前環境設置不一樣的配置文件（或者同一個文件設置不一樣的配置內容），而後在package.json的scripts中設置相關命令，例如：

scripts:{
    "start":"webpack --config webpack.dev.conf.js",
    "build":"webpack --config webpack.conf.js"
}
複製代碼

webpack相關

targets

由於服務器和瀏覽器代碼均可以用js編寫，因此webpack提供了多種構建目標(target)，經常使用的有web（默認值） node。其餘目標類型請查看文檔

//編譯爲類 Node.js 環境可用（使用 Node.js require 加載 chunk）
    target:'node'
    //自定義目標，能夠傳入個函數經過插件來自定義目標
    target: (compiler) => {
    compiler.apply(
      new webpack.JsonpTemplatePlugin(options.output),
      new webpack.LoaderTargetPlugin("web")
    );
  }
複製代碼

devtool的設置

此選項控制是否生成，以及如何生成 source map。默認爲false,經常使用的配置有：soure-map inline-source-map 其餘 devtool屬性 請查看文檔

//不生成原始源代碼的source.map.*文件，而是合併到bundle文件中
devtool:"inline-source-map"
//生成一份包含原始源代碼.source.map.*文件
devtool:"source-map"
複製代碼

externals

此配置選項提供了「從輸出的 bundle 中排除依賴」的方法 。即當須要引用一個庫，可是又不想被打包，而且又不影響咱們在程序中以CMD、AMD或者window/global全局等方式進行使用，那就能夠經過配置externals。，例如：

//html中
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
//配置中能夠這樣設置：表示應該排除 import $ from 'jquery' 中的 jquery 模塊。
externals: {
  jquery: 'jQuery'
}
//代碼中正常的使用
import $ from 'jquery'
複製代碼

經常使用npm包介紹

若是想要精通webpack，那掌握nodejs基礎是咱們繞不過的坎，一下幾個npm包和node api我的認爲必需要會使用的：

• path

//鏈接文件路由使其成爲絕對路徑
path.resolve(__dirname,'index.js')
複製代碼

• fs：文件的讀取/複製/刪除/新建等操做
• inquirer：交互式命令包
• chalk：console輸出字體顏色的設置

經常使用插件

• HtmlWebpackPlugin：生成html文件
• CleanWebpackPlugin:清除上一次生成的文件
• WebpackDevServer：本地服務啓動
• EnvironmentPlugin：設置環境變量的值
• HotModuleReplacementPlugin：模塊熱替換插件

本節只是簡單介紹下經常使用的插件，關於插件我會用單獨的一章來介紹。詳細文檔請查看

總結

隨着前端工程化的發展，webpack的使用熟練與否也成爲了判斷是不是一名合格的前端開發的標準之一，經過對webpack進一步的學習是我瞭解了他不只僅是一個前端打包工具。本系列文章是本身對webpack一些淺顯的認識。