現在的 webpack 不再是入門噩夢,過去 webpack 最讓人心塞的莫過于配置文件，而 webpack4 誕生隨之而來的是無配置 webpack。

使用 webpack4，至少只需要安裝 webpack 和 webpack cli。所以大家完全可以自己打一個最簡單的包，還能修改插件對比前后的區別。

npm i webpack webpack-cli -D 安裝后，因為 webpack4 會默認 src 為入口目錄，所以先新建 src/index.js。

// src/index.jsimport { sth } from './shouldImport'import other from './shouldImport'let test = 'this is a variable'export default { a: test + ',' + sth, other,}

為了更了解 webpack  導入機制所以再新建 src/shouldImport.js。

// src/shouldImport.jsexport let sth = 'something you need'export default { others: '',}

然后運行 node_modules/.bin/webpack --mode development 即可在 dist/main.js 看到打包后的文件。

但是默認設置中模塊文件會被 eval 包裹導致不便查看，所以需要再在設置做一點修改，把 devtool 屬性改為 'source-map'：

// 在根目錄新建 webpack.config.js 文件module.exports = mode => { if (mode === 'production') {  return {} } return {  devtool: 'source-map', }}

然后再打包應該就能看到類似一下的文件結構，開發環境下打包得到的文件自帶注釋，理解起來不難：

;(function(modules) { // webpackBootstrap // The module cache 模塊緩存 var installedModules = {} // The require function 請求函數 function __webpack_require__(moduleId) {  // Check if module is in cache  // 檢查模塊是否在緩存  if (installedModules[moduleId]) {   return installedModules[moduleId].exports  }  // Create a new module (and put it into the cache)  // 創建新模塊并放進緩存  var module = (installedModules[moduleId] = {   i: moduleId,   l: false,   exports: {},  })  // Execute the module function  // 執行模塊函數（有點不懂為什么 this 要傳入 module.exports）  modules[moduleId].call(   module.exports, // this   module, // 模塊對象本身   module.exports, // 模塊對象的 exports 屬性   __webpack_require__ // 請求函數最終返回模塊輸出，傳入用于請求其他模塊  )  // Flag the module as loaded  // 加載完成標志  module.l = true  // Return the exports of the module  // 返回模塊的輸出  return module.exports } // expose the modules object (__webpack_modules__) // 暴露所有模塊對象 __webpack_require__.m = modules // expose the module cache // 暴露模塊緩存 __webpack_require__.c = installedModules // Object.prototype.hasOwnProperty.call __webpack_require__.o = function(object, property) {  return Object.prototype.hasOwnProperty.call(object, property) } // define getter function for harmony exports // 為 ES6 export 定義 getter 函數 __webpack_require__.d = function(exports, name, getter) {  if (!__webpack_require__.o(exports, name)) {   // 檢查屬性是否存在   Object.defineProperty(exports, name, { enumerable: true, get: getter })  } } // define __esModule on exports // 于 export 定義 __esModule __webpack_require__.r = function(exports) {  if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {   Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })  }  Object.defineProperty(exports, '__esModule', { value: true }) } // create a fake namespace object // 創建代用命名空間對象 // mode & 1: value is a module id, require it // value 是模塊 id，必要 // mode & 2: merge all properties of value into the ns // 合并 value 所有屬性到 ns // mode & 4: return value when already ns object // ns 已經是對象時返回 value // mode & 8|1: behave like require // 表現如 require __webpack_require__.t = function(value, mode) {  if (mode & 1) value = __webpack_require__(value)  if (mode & 8) return value  if (mode & 4 && typeof value === 'object' && value && value.__esModule)   return value  var ns = Object.create(null)  __webpack_require__.r(ns)  Object.defineProperty(ns, 'default', { enumerable: true, value: value })  if (mode & 2 && typeof value != 'string')   for (var key in value)    __webpack_require__.d(     ns,     key,     function(key) {      return value[key]     }.bind(null, key)    )  return ns } // getDefaultExport function for compatibility with non-harmony modules // 用于兼容非 ES6 模塊的 getDefaultExport 函數 __webpack_require__.n = function(module) {  var getter =   module && module.__esModule    ? function getDefault() {      return module['default']     }    : function getModuleExports() {      return module     }  __webpack_require__.d(getter, 'a', getter)  return getter } // __webpack_public_path__ __webpack_require__.p = '' // Load entry module and return exports // 加載入口模塊并返回 export return __webpack_require__((__webpack_require__.s = './src/index.js'))})({ './src/index.js':  /*! exports provided: default */  function(module, __webpack_exports__, __webpack_require__) {   'use strict'   __webpack_require__.r(__webpack_exports__) // 于 export 定義 __esModule   /* harmony import */   var _shouldImport__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(    './src/shouldImport.js'   )   let test = 'this is a variable'   /* harmony default export */   __webpack_exports__['default'] = {    a: test + ',' + _shouldImport__WEBPACK_IMPORTED_MODULE_0__['sth'],    other: _shouldImport__WEBPACK_IMPORTED_MODULE_0__['default'],   }  }, './src/shouldImport.js':  /*! exports provided: sth, default */  function(module, __webpack_exports__, __webpack_require__) {   'use strict'   __webpack_require__.r(__webpack_exports__)   /* harmony export (binding) */   __webpack_require__.d(__webpack_exports__, 'sth', function() {    return sth   })   let sth = 'something you need'   __webpack_exports__['default'] = {    others: '',   }  },})