webpack 1 webpack基本介紹

webpack簡介

什麼是webpack:webpack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一下瀏覽器不能直接運行的拓展語言（Scss, TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。 

能夠作的事情：代碼轉換（es6轉se5，Less,Scss轉Css, TypeScript轉JavaScript等）、文件優化（壓縮代碼體積，合併文件等）、代碼分割（公共模塊抽離，路由懶加載等）、模塊合併、自動更新（熱更新），代碼校驗，自動發佈。
webpack基本配置

安裝webpack：

npm installl webpack webpack-cli -D

webpack能夠進行0配置，可是默認的0配置很弱，咱們須要手動配置webpack,默認配置文件的名字是webpack.config.js 

// webpack是node實現的，須要使用node語法
let path = require('path');
module.exports = {
    mode: 'development',  //模式  production-生產模式   development-開發模式
    entry: './src/index.js',    //入口
    output: {
        filename: 'bundle.js',  //打包後的文件名
        path: path.resolve(__dirname, 'dist')  //打包後文件所在的位置，這裏路徑必須是一個絕對路徑，以當前路徑解析出來dist的絕對路徑
    }
}

運行npx webpack打包（npm是5.2之後開始提供的） 

webpack打包出的文件解析

打包出來的新鮮的bundle.js 

/******/ (function(modules) { // webpackBootstrap
/******/   // The module cache 先定義一個緩存
/******/   var installedModules = {};
/******/
/******/   // The require function  實現了一個require方法
/******/   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  執行modules的moduleId這個模塊， this指向module.exports， 模塊中若是依賴的別的模塊，就又會執行__webpack_require__，這樣就經過惟一的入口實現了有依賴關係的加載
/******/      modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/      // Flag the module as loaded
/******/      module.l = true;
/******/
/******/      // Return the exports of the module
/******/      return module.exports;
/******/   }
/******/    //...此處省略一些內容
/******/   // Load entry module and return exports  默認調用require方法傳入的moduleId是入口模塊的路徑
/******/   return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/******/ ({
/***/ "./src/index.js":  //key -> 模塊的路徑
/*! no static exports found */
/***/ (function(module, exports) {  //value -> 執行函數
eval("console.log('webpack4  cs');\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });

實際開發中，咱們會配置多個webpack的配置文件，因此咱們不能使用webpack.config.js這個默認的名字。那麼怎麼自定義webpack配置文件的名字呢？ 

咱們須要兩個配置文件:開發環境webpack.config.dev.js   生產環境webpack.config.prod.js。 咱們能夠在執行webpack命令時配置config參數，如今咱們經過npm scrpits配置。

"scripts": {
  "dev": "webpack --config webpack.config.dev.js",
  "prod": "webpack --config webpack.config.prod.js"
},