初識webpack4.0

概念

webpack本質(zhì)是javaScript(以下簡稱js)應(yīng)用的靜態(tài)打包工具，基本過程是在內(nèi)部構(gòu)建一個依賴圖(dependency graph)多搀，用于映射項目所需的每個模塊歧蕉，并生成對應(yīng)的bundle。

模式

module.exports = {
  /* 默認(rèn)是production, 可根據(jù)環(huán)境自行判斷 */
  mode: isProd ? 'production' : 'development',
}

入口

入口用于指定webpack應(yīng)該使用那個模塊來開始構(gòu)建內(nèi)部的依賴圖康铭，編譯找出哪些模塊和庫是直接還是間接有依賴關(guān)系惯退，其默認(rèn)值./src/index.js,也可通過項目的配置文件(webpack.config.js, 項目根目錄處中，webpack會默認(rèn)使用改文件配置)中指定入口：

module.exports = {
  mode: isProd ? 'production' : 'development',
  /* 入口可以為多個从藤，用數(shù)組表示 */
  entry: './view/src/index.js'
}

輸出

output 指定bundle文件的創(chuàng)建路徑和命名催跪，默認(rèn)是在./dist/main.js，也可通過output字段進(jìn)行自定義夷野，如下：

const path = require('path');

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: './view/src/index.js'
  output: {
    path: path.resolve(_dirname, 'public'), // _dirname是指當(dāng)前模塊或文件的目錄名稱
    filename: '[name]-[chunkhash:8].js'
  }
}

loader

loader可以稱作加載器或者資源轉(zhuǎn)化器懊蒸，因為webpack本身只能打包js和json的文件資源，loader就應(yīng)運而生了悯搔，實質(zhì)是一個函數(shù)骑丸，接受源文件作為參數(shù)，返回轉(zhuǎn)換或預(yù)處理的結(jié)果鳖孤，使得webpack可以正常打包者娱，loader的使用方式有三種：

配置(推薦): 在webpack.config.js中配置抡笼，可全局使用
內(nèi)聯(lián)：在每個import或等同于import 的語句中顯示指定loader
CLI：在可視化終端或shell命令中指定

方式一：在配置文件中對不同后綴的文件選擇不同的loader,簡單如下：

const path = require('path');

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: './view/src/index.js'
  output: {
    path: path.resolve(_dirname, 'public'), // _dirname是指當(dāng)前模塊或文件的目錄名稱
    filename: '[name]-[chunkhash:8].js'
  },
/*
rules里的對象test和use屬性是必須的苏揣，表示在遇到正則匹配的文件時，先用對應(yīng)的 loader轉(zhuǎn)換
*/
  module: {
    rules: [
       { test: /\.jsx?$/, use: 'happypack/loader' },
       { test: /\.(less|css)$/, use: [ { loader: 'css-loader }, { loader: 'less-loader' } ] },
    ]
  }
}

方式二：內(nèi)聯(lián)表達(dá)

/* 使用 推姻！將不同的loader分開平匈，每個loader都是基于當(dāng)前目錄解析 */
  import Styles from 'style-loader!css-loader?modules!./styles.css';

方式三： CLI

/* 同樣使用 ！將不同的loader分開藏古，表示jade文件使用jade-loader增炭，css文件使用style-loader和css-loader */
  webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

再看一下loader的一些特性，如下

鏈?zhǔn)絺鬟f ：可對資源使用流水線操作(pipeline)
支持同步或異步
可接收查詢參數(shù)：用于對loader進(jìn)行傳遞配置
loader會產(chǎn)生額外文件

plugin

plugin 是在loader不能滿足需求的情況下引入的插件拧晕，實質(zhì)是一個對象隙姿，可通過new操作來創(chuàng)建實例，用來擴(kuò)展業(yè)務(wù)厂捞，而且在整個生命周期起作用输玷，示例如下：

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

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: './view/src/index.js'
  output: {
    path: path.resolve(_dirname, 'public'), // _dirname是指當(dāng)前模塊或文件的目錄名稱
    filename: '[name]-[chunkhash:8].js'
  },
/*
rules里的對象test和use屬性是必須的，表示在遇到正則匹配的文件時靡馁，先用對應(yīng)的 loader轉(zhuǎn)換
*/
  module: {
    rules: [
       { test: /\.jsx?$/, use: 'happypack/loader' },
       { test: /\.(less|css)$/,
          use: [
             { loader: 'css-loader' },
             { loader: 'less-loader' },
          ]
        },
    ],
  },
  /* html-webpack-plugin 把webpack打包的文件都自動插入到html文件中*/
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
}

plugin是具有<code>apply</code>屬性的js對象欲鹏，而且apply可被webpack compiler 調(diào)用，compiler對象可在整個的編譯周期被訪問

// 定義常量臭墨，便于在其他hook中服用
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 構(gòu)建過程開始赔嚎！");
        });
    }
}

devtool

該選項控制是否&如何生成source map，不同的值會影響構(gòu)建和重新構(gòu)建的速度，詳細(xì)的看文檔

module.exports = {
  devtool: isProd ? '' : 'source-map',
}

配置

webpack配置是標(biāo)準(zhǔn)的Node.js CommonJs模塊尤误，實質(zhì)是導(dǎo)出一個對象的JavaScript文件侠畔，可自定義對象的屬性，其中可包括：

require() 其他文件袄膏；
通過require() 使用一些npm的工具函數(shù)践图；
三元表達(dá)式，操控JavaScript的表達(dá)式沉馆；
定義常量和變量并使用码党；
定義&執(zhí)行函數(shù)，簡化代碼斥黑，生成配置揖盘；
以上就是我們webpack的一些基本配置項