共计 3278 个字符，预计需要花费 9 分钟才能阅读完成。
终于学习了一下 webpackwebpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具。WebPack 可以看做是模块打包机（bundler），通过分析项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其打包为合适的格式以供浏览器使用。
为什么要使用 webpack
JavaScript 和 CSS 的依赖问题。开发过程中，JavaScript 和 CSS 的在页面中的顺序问题，经常会造成 CSS 没起作用，JavaScript 的某个变量和方法找不到。
性能优化。一般浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是为了前端项目的代码更清晰，结构更合理，我们采用了 MVC，MVVM 等很多架构分解出了很多 JS 文件，无疑又拖慢了网页的速度。为了解决这个问题，一般会采用以下两个方案：(1)、文件合并。浏览器需要下载多个 JS 文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件。当需要加载的文件非常多，网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。(2)、文件压缩。我们知道文件越大，下载越慢，而针对 JavaScript 和 CSS，里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响。
提高开发效率。主要体现在：(1)、Vendor 前缀。在 CSS3 使用越来越多的时候，我们都知道一些 CSS3 的新特性，在不同的浏览器中，CSS 有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加 CSS 的 Vendor 前缀。关于 vendor 前缀的学习 (2)、单元测试。JavaScript 的单元测试在使用 MVC 或者 MVVM 的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常有必要的，能进一步检测你的项目的健壮性和容错能力。关于 MVVM 的学习 (3)、代码分析。我们写的 JavaScript 很多时候会有一些潜在的 bug, 比如忘了添加分号，某个变量没有等等，使用一些 JavaScript 的代码分析工具，可以很好的帮我们检查一些常见的问题。(4)、版本升级。
Grunt 和 Gulp
Gulp/Grunt 是基于 task 任务的一种能够优化前端的开发流程的工具，而 WebPack 是一种模块化的解决方案，是基于整个项目进行构建的。Gulp/Grunt 在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。如图：而 webpack 把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack 将从这个文件开始找到你的项目的所有依赖文件，使用 loaders 处理它们，最后打包为一个（或多个）浏览器可识别的 JavaScript 文件。如图：Webpack 的优点使得 Webpack 在很多场景下可以替代 Gulp/Grunt 类的工具。
loader
webpack 本身只能加载 js/json 模块，如果要加载其它类型的文件 / 模块, 就需要使用对应的 loader 进行转化和加载。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转化功能，比如：css-loader，json-loader 等。
webpack 安装
全局安装：npm i webpack - g 项目依赖：npm i webpack –save-dev
简单示例
webpack01.html
<body>
<div id=”test”>
哈哈哈
</div>
<script type=”text/javascript” src=”js/test.js”></script>
</body>
test.js
import $ from ‘jquery’;
import ‘../css/common.css’;
$(function () {
$(‘#test’).addClass(“test”);
});
通过命令打包：
webpack js/test.js –output dist/bundle.js –mode development
打包完成后项目下多出 dist 文件夹，把 webpack01.html 拷贝进去，在页面上访问，可以出现相同效果 webpack 把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。关于 webpack 打包原理学习于：https://blog.csdn.net/baozhiq…
webpack 配置文件
除了以上通过命令来打包，还可以通过配置文件配置 webpack 的入口文件等等信息, 在终端直接执行 webpack 即可打包。webpack.config.js
const path = require(‘path’);
module.exports = {
mode: ‘production’,
// 入口文件配置
entry: ‘./js/test.js’,
// 输出配置
output: {
// 出口文件
filename: ‘bundle.js’,
// 设置全路径
path: path.resolve(__dirname, ‘dist’)
},
module: {
// 规则数组, 里面的每一个对象都是在描述一个 loader
rules: [
{
//css 文件加载，正则表达式 css 文件的路径
test: /\.css$/,
use: [
‘style-loader’,
‘css-loader’
]
},
{
//// 图片文件加载
test: /\.(png|jpg|gif)$/,
use: [
{
loader: ‘file-loader’,
query: {
name: ‘img/[name]-[hash:5].[ext]’
}
},
],
},
]
},
devServer:{
contentBase: ‘./dist’
}
};
关于配置文件详解来自于：https://blog.csdn.net/qq_3977…
css 文件打包
webpack 打包 css 文件需要添加 style-loader 和 css-loader 模块:npm install css-loader style-loader –save-dev(或者通过配置文件引入)css-loader 让我们能使用类似 @import 和 url(…) 的方法实现 require() 的功能,style-loader 将所有的计算后的样式加入页面中，二者组合在一起能够把样式表嵌入 webpack 打包后的 JS 文件中。关于测试代码，上面示例已展示。
webpack 插件
插件（Plugins）是用来拓展 Webpack 功能的，它们会在整个构建过程中生效，执行相关的任务。
HtmlWebpackPlugin
该插件依据一个简单的模板，帮你生成最终的 Html5 文件，这个文件中自动引用了你打包后的 JS 文件。通过 `npm install –save-dev html-webpack-plugin 命令安装。webpack.config.js 的配置: 使用：删除掉原先打包编译生成的 dist 文件夹，重新执行 webpack，该插件会自动根据指定的模板页面帮助我们创建 index.html 文件，并做好相关配置引入。
自动编译打包
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载 (live reloading)。通过 npm install –save-dev webpack-dev-server 命令安装。webpack.config.js 的配置：编译打包：package.json 中
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “webpack-dev-server –open”,
“build”: “babel js –out-dir lib”
}
终端执行 npm start 即可。
