上篇对模块化打包工具的需求是：
-
能把新特性编译，解决兼容性
-
能把散乱模块打包到一起
-
能支持不同类型前端资源模块化
对于上述需求，Webpack作为模块打包工具，能将零散的js代码打包到一个文件中；
能通过Loader机制实现编译转换；
同时支持在JS中以模块化的方式载入任意类型资源文件（例：在JS中加载css文件，被加载的css文件会通过style标签的方式工作）
Webpack 作为目前最主流的前端模块打包器，提供了一整套前端项目模块化方案；不仅是JS文件，所有前端开发涉及的资源都能进行模块化；
Webpack 4 以后的版本支持零配置的方式直接启动打包，整个过程会按照约定将 src/index.js 作为打包入口，最终打包的结果会存放到 dist/main.js 中。
上述代码，在src文件夹下创建两个JS文件，
- heading.js以ES Modules方式导出一个创建元素的函数；
- index.js引入并使用该模块，
- 最后在html文件中通过script标签以模块化的方式引入index.js
此时支持ES的浏览器中可以打开html文件，一个h2标题元素，click点击之后出alert出弹窗
代码实现功能
但存在兼容性风险，不支持的会报错；
所以此时需要用webpack打包工具将我们按照模块化方式拆分的JS代码重新打包到一起；
一、Webpack实现最基础打包：
第一步，初始化package.json文件，安装webpack，webpack-cli
$ npm init --yes
$ npm i webpack webpack-cli --save-dev
P.S. webpack 是 Webpack 的核心模块，webpack-cli 是 Webpack 的脚手架程序，用来在命令行中调用 Webpack。
第二步，直接运行webpack命令打包JS代码
$ npx webpack
P.S. npx 是 npm 5.2 以后新增的一个命令，可以用来更方便的执行远程模块或者项目 node_modules 中的 CLI 程序。
执行上述命令后，Webpack会默认从src/index.js文件打包，再根据代码中的模块导出载入操作，自动将所用到的代码打包到一起
完成后，根目录下多出一个dis文件夹，打包结果就存在于里面的main.js文件中
image.png
总结：对于Webpack最基本的使用：先初始化package.json文件，然后安装webpack + webpack-cli，最后执行npx webpack打包，会有一个默认路径dist/main.js存放打包结果
此时我们如果修改index.html中的引入文件为main.js，由于打包后的代码不会再有import和export，所以我们可以删除 type=“module”（这是ES的一个语法，用来区分引入的是模块还是普通JS脚本）
还可以将Webpack命令定义到npm script中，用起来更方便，直接npm run build
image.png
此时html引入打包后的文件也能正常显示页面，并且这个文件是经过webpack打包后的兼容性文件；
二、配置项：入口文件路径/输出包文件路径
Webpack 4 以后的版本支持零配置的方式直接启动打包，整个过程会按照约定将 src/index.js 作为打包入口，最终打包的结果会存放到 dist/main.js 中。
但很多时候我们需要对入口文件进行路径约定，此时配置项为entry，负责指定webpack打包的入口文件路径
除了入口文件，打包之后的输出文件路径可以通过output属性设置文件位置，output属性的值必须是对象，其中filename指定输出文件名称，path指定输出目录(可选，默认为dist)
image.png
总结：当前提到的内容为webpack如何打包（两步），然后打包文件可以script引入使用，还有两个配置项属性（入口文件、输出文件）
网友评论