webpack4-js模块实现

前言：
ES6模块化是ECMA提出的JavaScript模块化规范，他在语言的层面上实现了模块化。浏览器厂商和node都宣布要原生支持该规范。他将逐渐取代上一篇所提到的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

采用ES6模块化导入和导出时的代码如下：

// 导入
import { name } from './person.js'
// 导出
export const name = 'zl';

ES6模块虽然是终极模块化方案，但他的缺点在于目前无法直接运行在大部分JavaScript运行环境下，必须通过工具转化成标准的ES5后才能够正常运行。webpack就是这样一种自动化构建工具，能够把源代码转化成发布到线上的可执行JavaScript、CSS、HTML代码，所以学习他的重要性不言而喻。

1. webpack

webpack能够做的事情有很多：

• 代码转化（各种插件/loader）：ES6编译成ES5，LESS编译成CSS等；
• 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等；
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行的部分代码让其异步加载；
• 代码合并：在采用模块化的项目当中会有多个模块和文件，需要构建功能把模块分类合并成一个文件；
• 自动刷新(devserver)：监听本地源代码的变化，自动重新构建、刷新浏览器；
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

在webpack中一切文件皆为模块，通过loader转化文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注于构建模块化项目。

2. 安装

• 全局安装 npm install webpack -g
  但是这种安装不推荐，不同的人安装的版本不同时，打包会受到影响，打包不成功。

• 本地安装
  npm init -y（这里的-y表示直接略过所有问答，全部采用默认答案）
  npm install webpack webpack-cli -D （开发依赖，只在开发环境下使用）

安装好之后的我们的文件目录下会多一个node_modules文件夹，其中的bin文件夹中有本次安装的webpack：

在src文件夹下我们创建a.js以及入口文件index.js：

// a.js
module.exports = "happy coding!"

// index.js
/* 入口文件 */
let str = require("./a.js");
console.log(str)

3. 打包并实现

下面我们执行一下打包操作：npx webpack，可以看到我们的文件目录中多了一个dist文件夹：

这里的main.js就是默认的打包出口。这里要强调一下在webpack3中需在webpack.config.js中配置是开发模式还是生产模式，默认在生产模式下打包出来的内容只有按一行显示，不会给压缩、换行。

在webpack4中，可以通过设置模式设置当前是开发模式还是生产模式：

执行命令：npx webpack --mode development
再来看生成的打包文件main.js中的内容：

而且打包出来的文件可以在浏览器使用，在src下新建index.html，引入main.js文件ÿ