在本文中，我们将为您详细介绍webpack:webpack简单打包后的代码(1)的相关知识，并且为您解答关于webpack打包结果的疑问，此外，我们还会提供一些关于00-认识webpack-为什么要模

在本文中，我们将为您详细介绍webpack: webpack简单打包后的代码(1)的相关知识，并且为您解答关于webpack 打包结果的疑问，此外，我们还会提供一些关于00-认识webpack - 为什么要模块化 -webpack打包过程、02-webpack的基本配置和输入webpack实现自动打包、53 webpack概念、webpack核心介绍、webpack使用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug的有用信息。

• webpack: webpack简单打包后的代码(1)（webpack 打包结果）
• 00-认识webpack - 为什么要模块化 -webpack打包过程
• 02-webpack的基本配置和输入webpack实现自动打包
• 53 webpack概念、webpack核心介绍、webpack使用
• 645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug

webpack: webpack简单打包后的代码(1)（webpack 打包结果）

源码

本文研究的源码地址为：https://github.com/collect-webpack/practice/tree/master/webpack-01

在本研究的前提是 entry 的配置为 string。随着 webpack 配置的不同。打包后的代码结构在有些部分也不相同，举个例子：

• entry 为 String 类型，我们的第一个执行模块(下面注释中可以找到)是这样子：

/***/ (function(module, exports, __webpack_require__) {

eval("const str = __webpack_require__(/*! ./test.txt */ \"./src/test.txt\");\nconst test = __webpack_require__(/*! ./test */ \"./src/test.js\");\nconsole.log(str);\nconsole.log(test);\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ }),

• entry 为 Array 类型时：

/***/ 0:
/*!********************************************!*\
  !*** multi ./src/index2.js ./src/index.js ***!
  \********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("__webpack_require__(/*! ./src/index2.js */\"./src/index2.js\");\nmodule.exports = __webpack_require__(/*! ./src/index.js */\"./src/index.js\");\n\n\n//# sourceURL=webpack:///multi_./src/index2.js_./src/index.js?");

/***/ })

可以看出当 entry 为数组时，两个chunk的执行顺序就是 entry 数组的配置顺序。而且他们的执行互不干扰。

编译后代码

/******/ (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
/******/ 		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;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__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
/******/ 	__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
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like 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
/******/ 	__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;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/index.js"); // 第一个执行模块
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("const str = __webpack_require__(/*! ./test.txt */ \"./src/test.txt\");\nconst test = __webpack_require__(/*! ./test */ \"./src/test.js\");\nconsole.log(str);\nconsole.log(test);\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ }),

/***/ "./src/test.js":
/*!*********************!*\
  !*** ./src/test.js ***!
  \*********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = {\n  name: ''gaollard''\n}\n\n//# sourceURL=webpack:///./src/test.js?");

/***/ }),

/***/ "./src/test.txt":
/*!**********************!*\
  !*** ./src/test.txt ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = \"`hello world`\"\n\n//# sourceURL=webpack:///./src/test.txt?");

/***/ })

/******/ });

modules

由上面可以看出打包后的代码就是一个自执行函数里面，所以才会出现在全局作用域中找不到你在某一个具体模块定义的变量。这个函数接受一个对象类型参数 modules。我们去掉部分注释：

const modules = {
  "./src/index.js": (function(module, exports, __webpack_require__) {
    eval("const str = __webpack_require__(/*! ./test.txt */ \"./src/test.txt\");\nconst test = __webpack_require__(/*! ./test */ \"./src/test.js\");\nconsole.log(str);\nconsole.log(test);\n\n//# sourceURL=webpack:///./src/index.js?");
  }),

  "./src/test.js": (function(module, exports) {
    eval("module.exports = {\n  name: ''gaollard''\n}\n\n//# sourceURL=webpack:///./src/test.js?");
  }),

  "./src/test.txt": (function(module, exports) {
    eval("module.exports = \"`hello world`\"\n\n//# sourceURL=webpack:///./src/test.txt?");
  })
}

这样看就是清晰了。对象的 key 为模块的路径，value 为 一个函数，这个函数接受两个参数。

(1) module: 被缓存在 installedModules 中

var module = installedModules[moduleId] = {
  i: moduleId, // 模块所在路径
  l: false, // 是否已经加载(自执行)
  exports: {} // 模块导出的结果
};

当使用 webpack_require 函数加载某个模块时，这个模块先执行，并且将执行结果赋值给 installedModules 对应 exports。并且标记该模块已经被加载了，第二次使用__webpack_require__ 加载时就会直接返回 module.exports。这意味这一个模块只会被 eval执行一次。

名词解释

• modules: 所有的模块集合
• webpackBootstrap: 负责启动整个应用程序(上面这一段代码)
• webpack_require: webpack 实现的加载函数
• exports : 模块的导出值
• installedModules: 缓存的模块集合

00-认识webpack - 为什么要模块化 -webpack打包过程

webpack在不进行任何配置的情况下，他只认识js。

为什么要打包？

因为一个个小文件，我们合成一个，这样请求就只请求一次。

webpack除了打包之外，还具有翻译官的功能？

loader把浏览器看不懂的代码翻译成浏览器看的懂的代码。

 Plugin？

对文件做点别的事情

不管是loader 还是 plugin 都是可插拔，意思就是你什么时候想用，你就装进来，不想用，删掉。所以说webpack不仅强大，而且灵活。

为什么要模块化？模块化的好处？

 如上图，传统的一个页面去引入不同的js就是如上一个个去引入，但是这样会有命名冲突的问题，A.js 和B.js中可能有相同的变量命名。

解决方法：

在A.js中和B.js 中加上命名空间。

命名空间会造成一些问题： 

 如上图，把这个autoLogin命名空间的模块暴露出去了，其实暴露的只是想让login 给别人用，但是全部都给别人了，如果别人误操作去 autoLogin.username = '张三', 不小心把username给改掉了，那么可能你login方法里去做的登录名和密码就永远也不符合了，这不符合开闭原则。

所以，单纯使用命名空间只是为了起到被覆盖，冲突的作用，但是并不能保证随意的访问和篡改，那么如何做呢？

我们用函数作用域，函数的闭包机制，保护里面的变量不被污染。也叫作模块作用域：暴露该暴露的，隐藏该隐藏的。

 如上图：这样利用闭包就保护了私有变量，又能只暴露我想暴露出去的这个方法。这样外面再去 :

 改写一个比较标准的模块化写法：

 上面的为什么要用一个对象包裹一下tell方法？不能直接赋值给susanModule吗？

 如图以上对比：就是给susanModule 让其为一个对象，对象是叫做tell,tell是个与value同名的key，以后调用的时候就是 susanModule.tell()

 综上：我们就可以得到模块化的优点：

1.作用域的封装 ：模块内部的实现不会暴露在危险的全局作用域中，上面就是通过暴露tell接口，供外面使用。

2.重用性：如上面的，只需要执行susanModule.tell 就可以拿到这个方法

3.解除耦合 ：如果把代码全部扔在一个文件中，出现BUG排查起来很难找，这样模块化后就容易找到定位到错误的模块。

 webpack打包原理和过程：

1.把你写的模块(js文件)中的每个逻辑代码块当做webpack一个自执行函数的入参（入参是一个数组，你写的这些代码逻辑块都会装到这个数组中）

第一步：

 第二步：把模块包装起来放入自执行函数中的数组（数组都是模块的入参）

 第三步：实现模块加载的方法，并把它放到模块执行的环境中，确保模块间可以相互调用。

1.首选去检查，你现在塞给我的这个模块啊我是不是已经加载过了，我去已加载模块的对象中去查这个id，发现已经加载过了，就不进行二次加载了，就直接把加载过的这个结果给你返回过来。

2.如果这个模块没有加载过，那我把其存到那个已加载的对象中，存的时候添加一个moduleId属性，就是给其做个记录

3.接着我就把他的this指到module.exports的导出结果上去，并且去执行已经包装好的模块逻辑。这一步就是让模块逻辑进行执行

4.最后把模块的返回值给return 出去。

第四步：把执行入口文件的逻辑放在一个函数表达式中，并立即执行这个函数（只的就是下面的这个外层的自执行函数）

02-webpack的基本配置和输入webpack实现自动打包

1安装webPack的方式
    01==》    第一次全局安装  npm i webpack -g  第一次安装了之后以后就不需要在安装了
        查看webpack的版本,webpack -V    我的版本是3.8.1
        如果出现对应的版本， 你就不需要再次执行 npm i webpack -g
        说明你已经安装过webpack了；

       02==》 创建一个文件夹；如testwebpack
        在项目根录下(testwebpack)运行 npm i webpack --save-dev 安装到项目依赖中去 

        会出现两个文件夹；node_modules  package.json这个两个文件夹

        如果没有 package.json ；你就执行   npm init -y 

2尝试使用webpack

         安装包描述文件  npm init -y  新版本的node会自带这个的;
         
         npm i jquery -S 安装jq 保存到依赖列表中去了；
         此时你就可以在package.json 看见自己已经安装了jquery了

         src目录下创建 imgs文件夹 和js文件夹（文件结构不要错了）

       

         在main.js文件中导入jq   导入的语法是  import **  from    **它是es6中导入模块的方式 
            1 如 import $ from  'jquery'   注意大小写
             从引入文件可以知道 首先是在自己的兄弟目录中去找  
             然后去父级目录的兄弟目录中去找  然后依次类推（重点）

             $(function(){
                console.log("haha")
             })
             在node.js中 你要是这样写的 const $=require("Jquery")
         

             由于es6的import导包的方式台高级了 所以浏览器解析不了 所以import $ from 'Jquery'汇报错
             所以需要webpack来惊醒转化

运行webpack。
webpack ./src/mian.js  ./dist/testindex.js 在dist中被编译的文件是为testindex.js

此时你就会发现，项目目录下多了一个dist文件夹；和文件夹下有个文件；

注意：如果如果你配置了webpack.config.js,再次运行上面的命令；会报错

配置webpack和命令运行；

  3在项目的跟目录下创建webpack.config.js文件配置如下;

   module.exports={
        entry:path.join(__dirname,'./src/main.js'),//入口文件 使用webpack要打包哪一个文件
            output:{ 输出相关的配置
                path:path.join(__dirname,'./dist'),1)">指定打包好的文件会输出到哪一个目录（dist)下去
                filename:"testindex.js" //指定打包好的文件的名称叫什么名字
             }
   }


  3所以在index中的时候我们就引入被webpack编译好的js文件就可以了
  <script src="../dist/testindex.js"></script>
  这里引入的时候需要注意的点是：
  之所以是testindex.js是因为配置写的编译成testindex.js

webpack 能够处理的问题
ebpack能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题   能装将es6的语法转化为es5的语法  

我们可以发现引入jquery的两种方式

const $=require("Jquery")

import $ from  'jquery'

53 webpack概念、webpack核心介绍、webpack使用

53 webpack概念、webpack核心介绍、webpack使用

webpack概念

Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔，等到实际需要的时候再加载。

开发环境：我们本地的环境或测试环境 development

生产环境：线上环境，比如：我们昨天讲的环境部署 production

为什么学习webpack

搭建前端开发环境（vue、react）、热更新、代码压缩等

但是webpack又依赖node环境 。

node你接口不会写。你会安装node即可。

学习node的两层含义：1、写动态网站（写接口） 2、为前端开发环境服务

webpack官网

https://www.webpackjs.com/

准备工作

1、先安装node

2、安装webpack和webpack-cli

npm i webpack@4 webpack-cli@3 -g

webpack核心介绍

配置文件:webpack.config.js

注意：写js代码，同时webpack基于node，所以也可以写node相关的代码 （不是写http服务）。最多用上：path、和commonjs规范

webpack只认识js文件，像图片、css、字体件... webpack不认识，不认识的文件使用加载器处理

webpack有很多 的插件 。插件就是丰富webpack功能的。比如：压缩js

webpack使用

打包js代码

1、单入口单出口（主流）

/*
    webpack依赖node环境 。
    这个js文件中，写的虽然是js。但是所有的node相关的都可以写。
​
*/ 
const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.join( __dirname,'dist' ),//把entry（入口文件）打包到哪个目录 必须是个绝对路径
        filename:'bundle.js',//打包后生成的文件名
    }
}
​
//默认认为你要打包上线了，上线了就是说要部署到服务器生产环境（要把所有的代码压缩）

2、多入口单出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:['./main.js','./test1.js'],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}
​

3、多入口多出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:{
        first:'./main.js',
        second:'./test1.js'
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    }
}
​

打包css

webpack是基于node的。而node只认识js文件。css是不能直接打包的。所以要找对应认识某文件的loader（加载器）

module属性。

讲这个案例的目的：

1、处理不了文件用对应的loader。webpack对一些loader模块的版本是有要求 。

2、devDependencies深刻认识。（开发依赖） devpendencies：项目依赖

步骤：

css-loader 3版本 style-loader 2版本

npm i css-loader@3 style-loader@2 -D

devDependencies： 开发依赖（上线是不需要的，只是开发的时候才使用），只开发阶段使用，线上不需要。

dependencies：项目依赖，无论上线还是开发阶段都需要，

module: {
    rules: [ 
        { 
            test: /\.css$/, 
            use: [ 'style-loader', 'css-loader' ]
        }
    ]
}

分离css

extract-text-webpack-plugin@next 插件

安装下载

npm i extract-text-webpack-plugin@next -D

加载器修改配置

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
rules: [ // 加载器的使用规则
	{
		test: /\.css$/,
		use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
			fallback: "style-loader", 
        	use: "css-loader"  // loader被用于将资源转换成一个CSS单独文件
        })
	}
]

插件配置

new ExtractTextPlugin("style.css"), // 输出的文件名

报错说明：

Error: Cannot find module 'webpack/lib/Chunk'

解决方案：在项目目录下下载webpack@4

打包less

npm i less@3 less-loader@7 -D

{ 
	test: /\.less$/, 
	use: ['style-loader', 'css-loader', "less-loader"]
}

{ 
	test: /\.less$/, 
	use: ExtractTextPlugin.extract({ 
		fallback: "style-loader", 
		use: ['css-loader', "less-loader"]
	})
}

npm i html-webpack-plugin@4 -D

plugins:[
        new HtmlWebpackPlugin({ // 插件配置对象
            title: "webpack 的使用",
            filename: "index.html", // 产出文件名(在dist目录查看)
            template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
            favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
            minify: {                             //对html文件进行压缩，
                    collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
                    minifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                    minifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）
                    removeAttributeQuotes: true,      //是否移除属性的引号 默认false
                    removeComments: true,             //是否移除注释 默认false
                    removeCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认false
             }
        }) // 数组元素是插件的new对象
    ]

npm i url-loader file-loader -D

 {
       test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
        use: 'url-loader'
 }

// 如果处理字体图标需要引入这个
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader'
}

devServer: { // 在这里可以对webpack-dev-server进行一些配置
        port: 9090, //修改端口号，默认为8080
        open: true, // 自动调用默认浏览器打开
}

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack'); // DefinePlugin是webpack内置插件
const copyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "js/bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetmodulefilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "哈哈 webpack",
      template: "./public/index.html"
    }),
    new DefinePlugin({
      // 要包裹两层引号
      BASE_URL: '"./"'
    }),
    new copyWebpackPlugin({
      patterns: [
        {
          // to: xxx, // 不用写，默认会使用output.path
          from: "public",
          globOptions: {
            ignore: [
              "**/index.html",
              "**/.DS_Store",
              "**/abc.txt"
            ]
          }
        }
      ]
    })
  ]
}

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="./favicon.ico">
    
    <title>杰帅的webpack</title>
  <script defer src="js/bundle.js"></script></head>
  <body>
    <noscript>
      <strong>We're sorry but 杰帅的webpack doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>