深入學習webpack 4.x核心用法及其源碼（一）

注：我是用的是webpack 4.x 版本

什麼是webpack?

它就是一個 模塊打包 工具 （Module Bilder）

模塊加載方式

它就是我們使用導入或導出模塊的規範，主要有四種：

• CommonJS （node）
  就是使用 require 導入，module.exports 導出
• ES6 模塊 （常用）
  使用 import 導入，export 導出
• AMD
• CMD

安裝

最好是安裝在項目中，別安裝在全局中。如果你運行兩個項目，一個使用 webpack 3.x ，一個使用 webpack 4.x ，它們兩個都互相需要對方，那如何確保都可以準確無誤的運行呢？不同版本的 webpack 都可以準確無誤的執行，這纔是我們想要的。

npm i webpack webpack-cli -s

webpack-cli 這個包的作用就是，在使用 webpack 和 npx webpack 中可以正確使用 webpack

運行

1、 通過webpack命令行(npx)

npx 可以幫助我們在項目中運行 webpack

npx webpack index.js

index.js 是你需要打包的文件，打包完後，會在項目中出現一個 dist的文件夾 ，裏面有一個 main.js 文件，該文件就是我們打包好的文件了

2、 通過默認配置文件 webpack.config.js

在 webpack 中默認將 webpack.config.js 認爲是配置文件。

在項目中創建 webpack.config.js，輸入以下代碼：

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),
    }
}

• mode：表示打包模式（是否被壓縮）

  • production ：默認，壓縮代碼
  • development ：不壓縮代碼

• entry ：表示入口文件路徑

  entry: './index.js' 
  
  // 等於，簡寫
      
  entry: {
  	main: './index.js'
  }
  

• output ：表示輸出文件

  • filename ：表示文件名稱
  • path ：表示文件路徑，使用 node 中的path模塊進行路徑拼接。可以不用寫，默認 ./dist

在命令行中運行：

npx webpack

它會默認根據 webpack.config.js 中的配置進行設置

我們可以使用 package.json 中的 script 進行打包，添加 "build":

{
  .
  .
  .
  "scripts": {
    "build": "webpack"
  },
  .
  .
  .
}

在命令行中運行：

npm run build

和 npx webpack 效果一樣，這條命令也就是 webpack，只不過它會先在項目中尋找，而後在從全局中尋找

打包多個文件

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js',
        sub: './src/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist'),
    }
}

像這樣打包就可以實現輸出多個文件，輸出的文件名爲：main.js 、 sub.js.