概述
webpack 作为目前最主流的代码打包工具，他提供了一整套的前端项目模块化方案，而不仅仅是局限于对JavaScript的模块化。
通过webpack提供的前端模块化方案，我们就可以很轻松的对我们前端项目开发过程中涉及到的所有的资源进行模块化，因为webpack的想法比较先进，而且早之前的使用过程也比较繁琐，再加上他的文档也比较晦涩难懂，所以说在最开始的时候他显得对我们开发者不是十分友好。
但是随着版本的迭代官网的文档也在不断的更新，目前webpack已经非常受欢迎，基本上可以说覆盖了绝大多数现代化的web开发应用项目。
接下来我们就通过一个小案例，先来了解一下webpack的一个基本使用。
我们有一个项目目录，目录中有个src文件夹，src中有两个文件 index.js 和 heading.js， 在src同级有一个index.html文件。
大致的作用也非常简单，我们在heading.js中默认导出一个用于创建元素的函数。
export default () => {
const element = document.createElement('h2');
element.textContent = 'Hello word';
element.addEventListener('click', () => {
})
return element;
}
在index.js中去导入这个模块并且使用了他。
import createHeading from './heading.js';
const heading = createHeading();
document.body.append(heading);
除此之外呢，我们在项目的跟目录下有个index.html，在这个文件中我们通过script标签以模块化的方式去引入了index.js
<body>
<script type="module" src="src/index.js"></script>
</body>
我们打开命令行，通过http-server . 的工具把他运行起来, (可以全局安装http-server模块)。
http-server .
我们可以看到可以正常的工作。没有什么问题。
接下来我们尝试引入webpack去处理我们的js模块。由于webpack是一个npm的工具模块，所以我们先通过yarn init的方式去初始化一个package.json
yarn init
完成过后我们再去安装一下webpack所需要的核心模块以及他对应的cli模块, 通过–dev把他指定为开发依赖。
yarn add webpack webpack-cli --dev
安装过后，webpack-cli程序所提供的cli程序就会出现在我们node_modules的bin目录中，可以通过yarn命令快速找到这样的一个cli并且去运行他。通过yarn webpack --version去执行一下。
yarn webpack --version
有了这样一个webpack之后呢，我们就可以通过他去帮我们打包我们在src下面的js代码了，具体的使用方式就是通过webpack命令去打包。执行yarn webpack命令之后webpack就会自动从src下面的index.js开始打包。
yarn webpack
完成过后控制台会提醒我们，顺着index.js有两个js文件被打包到了一起，与之对应的就是我们在项目的跟目录会多出一个dist目录，我们打包的结果就会存放在这个目录中的一个main.js当中。
这里我们回到index.html中，把js脚本文件的路径修改成dist/main.js。由于打包过程会把import和export转换掉，所以说我们已经不需要type="module"这样一种模块化的方式引入。
<body>
- <script type="module" src="src/index.js"></script>
+ <script src="dist/main.js"></script>
</body>
完成过后，我们再次启动服务，回到浏览器刷新一下。
http-server .
这里我们的应用仍然可以正常工作。
当然如果每次都通过yarn去运行webpack会比较麻烦的话，可以把webpack这个命令放到package.json当中的script当中，这样就可以直接为我们项目去定义一个build的任务。
"script": {
"build": "webpack"
}
build任务我们使用webpack去完成就可以了，在命令行执行 yarn build
yarn build
以上就是针对webpack的基本使用。
webpack 配置文件
webpack4.0以后的版本支持零配置的方式直接启动打包，整个打包过程会按照约定将src/index.Js作为打包入口最终打包的结果会存放在dist/main.js当中。
但很多时候我们都需要自定义这样的路径，例如我们的入口文件是src/main.js, 这时我们就需要去为webpack添加专门的配置文件，具体的做法就是在项目的跟目录下添加一个webpack.config.js的一个文件。
这个文件是一个运行在node环境的js文件，也就说我们需要按照CommonJS的方式去编写代码。
这个文件可以去导出一个对象, 我们通过导出对象的属性就可以完成相应的配置选项，例如我们添加一个叫做entry的属性，那这个属性的作用就是指定我们webpack打包入口文件的路径。我们将其设置为src下面的main.js。
这里需要注意的是这个entry的属性，如果是一个相对路径的话，这个前面的./是不可以省略的。
module.exports = {
entry: './src/main.js'
}
这时候我们再去命令行运行yarn build查看效果
yarn build
我们还可以通过output配置我们输出文件的位置, 这个属性要求值是一个对象，可以通过对象中的filename去指定输出文件的名称。例如我们设置成bundle.js
再去运行yarn build, 就可以看到，dist/bundle.js已经正常生成。
我们还可以在output中添加一个path属性去指定我们输出文件所在的目录, 这个属性需要是一个绝对路径，我们需要借助node中的path模块帮我们转换。这里我们也说到了，这是node环境中运行的代码，所以我们可以直接去载入path模块，然后根据path.join(__dirname, ‘dist’), 这就可以得到output的完整路径。我们再次运行yarn build就可以看到在项目中生成了output/bundle.js。
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
}
}
webpack 工作模式
webpack新增了一个工作模式的用法，这种用法大大简化了webpack配置的复杂程度，可以理解成针对不用环境的几组预设的配置，我们回到开发环境中，重新去运行webpack的打包命令。
打包过程中命令行会报出一个命令行警告，大致的意思就是说我们没有去设置一个叫做mode的属性，webpack会默认使用production的模式去工作。
在这个模式下webpack会自动启动一些优化插件，例如自动帮我们代码压缩，这对实际生产环境是非常友好的，但是对打包的结果我们没办法去阅读。
我们可以通过cli去指定打包的模式，具体的用法就是给webpack的命令去传入一个–mode的参数，这个属性我们有三种取值，默认是production，默认production会自动的去启动优化，优化我们的打包结果。
这里我们再尝试一下development，也就是开发模式。开发模式webpack会自动去优化打包的速度，他会去添加一些调试过程需要的服务到我们的代码当中，这些我们后面在介绍调试的时候会单独再介绍。
yarn webpack --mode=development
除此之外还有一个node模式，在node模式下，webpack就是运行最原始状态的打包，他不会去做任何额外的处理，目前我们的工作模式只有这三种。具体这三种的差异我们可以在官方文档中找到。
yarn webpack --mode=none
除了我们通过cli参数去指定工作模式，我们还可以在webpack的配置文件当中去设置工作模式，具体做法就是我们在配置文件的配置目录中去添加一个mode属性，这样的话webpack命令就会根据我们配置中的模式，去工作了，我们就不需要再去指定–mode的参数了。
打包结果运行原理
我们来一起解读一下通过webpack打包过后的结果，为了可以更好的理解我们打包过后的代码，我们先将webpack的工作模式设置成node。
const path = require('path');
module.exports = {
mode: 'node',
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
}
}
这样的话就是以最原始的状态去打包，我们回到命令行终端，再次去运行webpack的命令。去执行打包。
yarn webpack
完成过后我们去打开生成的bundle.js文件, 我们先把我们整体的结构折叠起来以便于我们更好的对结构了解。快捷键是ctrl + k 和 ctrl + 0。
/******/ (function(modules) {
// 接收参数位置
/******/ })
/******/ ([ // 调用位置
/******/ ]);
。我们可以看到整体生成的代码是一个立即执行函数。这个函数是webpack的工作入口。接收一个叫做modules的参数。调用的时候我们传入了一个数组。
最低0.47元/天 解锁文章
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
