webpack4中文文档_webpack 4.0 自己总结'吐'的一篇文章

上大学的时候老师讲一门语言，上来的第一节课就是配置各种环境，而通常看到那些脑袋都是一种快要炸的状态 。随着后来对Linux的学习之后发现，并没有那么头疼配置的东西（对于命令这么复杂的东西都可以接受，那么配置是不是也不显得那么枯燥了 ）。

本章是结合自己项目中的应该以及查看了webpack官方文档之后总结的一篇配置。目的也是锻炼自己在配置方面的兴趣（可能你们不懂恶心配置的那种感觉 ，只能慢慢克服）如有错误，还请各位大佬指出 ，小女子在此谢过 。

话不多说，看正文

一、webpack的认识

webpack能够把我们项目中引入的一个或者多个css或者JS资源文件，最终安装指定的依赖能够打包压缩成一个css或者一个JS，以此来实现我们的性能优化。以这种自动化的方法来完成项目的部署和构建，告别了手工。webpack是基于node.js开发的

在项目中的应用

• 代码转换：TypeScript编译成JavaScript、LESS/SCSS编译成CSS、ES6/7编译为ES5、虚拟DOM编译为真实的DOM等等…
• 文件优化：压缩JS、CSS、HTML代码，压缩合并图片，图片BASE64等
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码等
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器
• 代码校验：Eslint代码规范校验和检测、单元测试等
• 自动发布：自动构建出线上发布代码并传输给发布系统
• ……

webpack同类型工具

• grunt
• gulp
• fis
• webpack（Browserify / Parcel [ˈpɑːsl]）
• snowpack
• …

webpack中文网学习

webpack中文网地址

二、前端模块化开发进化史

JavaScript本身是弱化命名空间概念的，只有全局作用域和函数的私有作用域（ES6中新增块作用域），而模块化开发，从某种意义上来说，是强化了命名空间的概念！

• 有利于代码分离、解耦以及复用
• 团队并行开发
• 避免命名冲突
• 相互引用，按需加载
• ……

单利设计模式

let xxxModule=(function(){
    function fn(){
        //...
    }
    return {
        init(){
            //...        
        }
    }
})();

xxxModule.init();

AMD （Asynchronous Module Definition 异步模块定义）

如果需要使用外面的模块，需要先引入该模块，但是这种方式在现在的项目中已经不常用

文件目录：

|- lib
|- moduleA.js
|- moduleB.js
|- main.js

//main.js
//全局配置
require.config({
    baseUrl: 'js/lib',
});
require(['moduleB', 'moduleA'], function (moduleB, moduleA) {
    console.log(moduleB.average(10, 20, 30, 40, 50));
});

//moduleA.js
define(function () {
    return {
        sum(...args) {
            return args.reduce((total, item) => {
                return total + item;
            });
        }
    };
});

define(['moduleA'], function (moudleA) {
    return {
        average(...args) {
            args.sort((a, b) => a - b);
            args.pop();
            args.shift();
            return moudleA.sum(...args) / args.length;
        }
    };
});

CMD （Common Module Definition 通用模块定义）

define(function(require, exports, module) {
  // 通过 require 引入依赖
  let $ = require('jquery');
  let spinning = require('./spinning');

  // 通过 module.exports 提供接口
  module.exports = {
      init(){}
  };
});

CommonJS（一般应用于服务器开发，例如：Node.js）

• 导出：module.exports
• 导入：require

//CommonJS规范的使用
let A = require('./A');
// 第一次REQUIRE A模块，会把A模块中的代码执行，
//创建的变量A就是把模块中module.exports导出的结果拷贝一份给变量
A.sum(x, y);


A = require('./A');
// 第二次REQUIRE A模块，内部默认会看一下之前有没有导入过，如果导入过不会再把A代码重新执行，而是直接获取上一次拷贝的信息

ES6 Module （ESM : JS官方标准模块定义方式）

//ES6模块导入导出的使用
/*
 * ES6M