10天搞定webpack 1-3

Posted 2022-05-30 littlechen

1.webpack简介

什么是webpack:webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一下浏览器不能直接运行的拓展语言（Scss, TypeScript等），并将其打包为合适的格式以供浏览器使用。 

可以做的事情：代码转换（es6转se5，Less,Scss转Css, TypeScript转JavaScript等）、文件优化（压缩代码体积，合并文件等）、代码分割（公共模块抽离，路由懒加载等）、模块合并、自动更新（热更新），代码校验，自动发布。
2.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以后开始提供的） 

3.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"
,