webpack note1（初识）

Myth丶恋晨 2022-11-27 00:49 146阅读 0赞

# webpack概念 #

> 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。有四个核心概念：

*  入口(entry)
 *  输出(output)
 *  loader
 *  插件(plugins)

[webpage官网：https://www.webpackjs.com/concepts/][webpage_https_www.webpackjs.com_concepts]

--------------------

# webpack简介 #

webpack主要是用来打包，我们可以通过配置命令加工程序。但是如果每次加工都要亲力亲为，很麻烦，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。

webpack分成四个部分，其中最核心的就是入口和出口，同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为`webpack.config.js` ，或者webpackfile.js 。

总结一下，webpack共分为四个部分：`入口(entry)` 、`出口(output)` 、 `加载器(loader)` 、 `插件(plugins)`。

### 使用 npm 安装 webpack ###

//全局安装
    npm isntall -g webpack
    //把命令行也安装上
    npm install -g webpack-cli webpack
    
    //本地安装（安装到你的项目目录）
    npm install --save-dev 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标准发布后，标准的使用是以export指令导出接口，以import引入模块。但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。

**那么CommonJS模块和ES6模块最主要的区别：**

1.  CommonJS模块是拷贝（能修改其值），ES6模块是引用（只存在只读状态，不能修改其变量值）。
2.  CommonJS模块是运行时加载，ES6模块是编译时输出接口。

**二者语法上的区别：**  
CommonJS：使用node运行js。

//------------module.exports暴露-----------------------
    //暴露数据的页面
    var num = 3; 
    function fun() {  
    	return  "你好";
    } 
    module.exports = {  fun,num }; 
    
    //引用模块的页面
    var demo=require("./demo")
    console.log(demo.num,demo.fun());
    
    //------------exports暴露-----------------------
    //暴露数据的页面
    exports.num = 3;
    exports.fun=function(){ 
    	return "你好";
    }
    
    //引用模块的页面
    var demo=require("./demo")
    console.log(demo.num,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,fun()); 
    
    //------------export default暴露-----------------------
    var text="你坏";
    export default text;
    
    //使用
    import model from "./model"
    console.log(model);

友友的博客：[webpack 支持的模块方法][webpack]

# 总结 #

主要介绍了webpack，它的概念、功能；与Grunt以及Gulp的区别；支持的模块方法中最常用的commonjs规范以及ES6模块语法规范。

[webpage_https_www.webpackjs.com_concepts]: https://www.webpackjs.com/concepts/
[webpack]: https://www.cnblogs.com/QxQstar/p/10331205.html