初识webpack

一、简介

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

首先介绍一下前端打包和构建的概念。

前端打包，从字面意思，是将多个文件合并成一个文件。

因为前端模块化开发，不同模块放在不同的文件中，而发布运行时候，为了减少网络请求，应该将文件合并在一起。webpack做的就是这个工作。

当然前端代码开发完成将要发布时候，不仅仅打包就够了，还有很多工作要做：

• 代码压缩，为了减小运行时代码体积，提升加载速度，另外也为了降低代码可读性，从而提升安全性，需要对代码进行混淆压缩。
• 图片压缩和合并雪碧图
• 代码转译，比如将ES6、ts转成ES5（因为ES6语法虽然有助于我们开发和维护项目，但是有些浏览器并不支持，因此为了让项目能够在尽可能多的浏览器中运行，在构建时候将代码转换为兼容性更好的ES5），less、stylus转成css
• 可能需要去除代码中的注释
• 当代码需要发布到cdn时候，需要替换项目中对静态文件的引用路径

等等

做这些工作，将源代码转换成用户可以使用的文件（html,js,css,png等），即目标文件的过程，就是构建。打包也属于构建工作中的一部分。

webpack本质是一个模块打包机，但它结合loader、插件的能力可以完成构建工作。并可以完成很多个性化的构建工作。

学习webpack要动手操作，根据教程和文档，尝试每个配置，执行打包查看打包结果，观察配置对打包结果的影响，并思考配置在实际场景中的应用。

二、使用

webpack提供了CLI的接口和node接口，这里我们主要介绍CLI接口。

我们使用webpack，对源代码和其他资源打包构建。

每个项目都会有入口模块，是项目初始开始运行的模块，入口文件会依赖其他模块，模块还可能依赖其他模块，这样就形成了一个树状的结构。我们希望将项目打包构建然后生成的资源放到指定文件夹下。我们怎么使用webpack实现这一目标呢？

我们会将webpack引入项目中，然后告诉webpack我们的入口文件，webpack根据入口文件构建一个依赖树，然后遍历这个依赖树，并在遍历过程中解析，然后将模块进行转换，然后打包输出到指定文件夹下，打包的结果我们称为“bundle”。

我们通常会写好webpack配置文件（在配置文件中我们自己定义项目入口、输出的目录、各种类型文件的解析方式等等），然后输入webpack命令（可能加一些参数），webpack就会根据配置进行打包工作了。

安装和使用

npm init -y
npm install webpack webpack-cli --save-dev

创建目录和文件

.
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── log.js

在package.json中加入脚本"build": “webpack”。

目前没有创建webpack配置文件，webpack会按照默认方式打包。

入口默认在src中，打包后的结果默认输出到dist/main.js中。

默认配置打包

// index.js
import log from './log';

const name = 'webpack';

log(name);


// log.js
export default (...args) => console.log(...args);

在项目目录下运行命令npm run build

我们看到在项目中多了一个"dist"目录，其中有main.js文件。

// main.js

(()=>{"use strict";((...c)=>{console.log(...c)})("webpack")})();

观察main.js中的内容我们可以发现，代码进行了打包，把源代码中的两个文件打包成了一个文件，并且进行了压缩（这时候还没有进行代码转换，还保留箭头函数语法，这时因为我们还没配置loader，loader后面会介绍）。

指定配置文件构建

指定webpack配置打包，可以通过webpack --config <配置文件名>来指定webpack配置进行打包，如果不加config参数，默认项目根目录的webpack.config.js文件作为配置文件。

我们在项目中创建webpack.config.js文件，并写下如下的配置

// webpack.config.js

const path = require('path');

module.exports = {
  	// 入口文件
    entry: './src/index',
  	// 出口配置
    output: {
        // path需要是一个绝对路径
        path: path.resolve(__dirname, 'output'),
        filename: '[name].[hash].js'
    }
};

这个配置指定入口是"src/index.js"，打包结果输出到"o