什么是Webpack？（详细介绍）

r囧r小猫 2023-01-03 04:21 228阅读 0赞

# Webpack #

webpack主要是打包，所以其核心存在两个部分，入口和出口，你可以把webpack加工想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦那，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。  
 webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为webpack.config.js ，还有webpackfile.js ，

总结一下，webpack共分为四个部分，这个概念一定要记好，本堂课就是围绕这四个配置进行展开的 :

\* 入口  \* 出口  \* 加载器  \* 插件

### 什么是webpack？ ###

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

### webpack能干什么？ ###

根据入口文件的依赖，加载所有模块js，然后合并成一个js;标准且纯粹的模块化打包工具 : 依赖一个文件为入口打包所有依赖为当前浏览器可用的代码。

### WebPack和Grunt以及Gulp相比有什么区别？ ###

Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

1.Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

2.Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

## webpack使用ES6模块语法 ##

### CommonJS与ES6模块区别： ###

ES6标准发布后，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。  
commonjs模块和es6模块最主要的区别：  
       1.commonjs模块是拷贝（能修改其值），es6模块是引用（只存在只读状态，不能修改其变量值）  
       2.CommonJS模块是运行时加载，ES6模块是编译时输出接口

### 语法区别： ###

### CommonJS：使用node运行js ###

//暴露数据的页面
    var num = 3; 
    function fun() { 
    return  "你好";
    } 
    module.exports = { 
    fun,
    num
    }; 
    //引用模块的页面
    var demo=require("./demo")
    console.log(demo.fun());
    console.log(demo.num);
    
    //------------exports暴露-----------------------
    //暴露数据的页面
    exports.num = 3;
    exports.fun=function(){
    return "你好";
    }
    //引用模块的页面
    var demo=require("./demo")
    console.log(demo.num);
    console.log(demo.fun());

ES6模块 （稍后使用webpack打包之后运行）

作用：

export和export default实现的功能相同，即：可用于导出（暴露）常量、函数、文件、模块等，以便其他文件调用。

区别：

1、export导出多个对象，export default只能导出一个对象

2、export导出对象需要用\{ \}，export default不需要\{ \}，如：

//暴露模块export
    export let num = 3;
    export function fun() {
    return "你好"
    }
    //使用模块
    import { num,fun } from './demo';
    console.log(num); 
    console.log(fun());
    
     
     <script type="module" src="js.js"></script>
    //····························
    //使用export default
    var text="你坏";
    export default text;
    //使用export default 
    import model from "./model"
    console.log(model);