title: webpack打包+调试
copyright: true
categories: 前端
tags: [webpack]
password:

本文基于webpack4.20.2，仅讲解webpack打包操作，以及打包好的js文件的调试，一些配置或者和vue整合还是要看其它资料

文章目录

一、了解webpack
二、开始使用Webpack
三、正式创建一个项目
四、webpack的运行
五、webpack打包后的js文件的调试

一、了解webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
简单来说就是将一系列的js模块，从入口文件，一步一步通过webpack整合打包成一个js文件，webpack有很多常用的插件和loader，可以将所有类型的文件转换为 webpack 能够处理的有效模块。
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器
…
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

二、开始使用Webpack

1、首先需要安装node.js服务以及最好给npm升一下级到最新版。

2、安装webpack命令

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

3、安装webpack-cli
根据官方文档推荐局部安装webpack

//全局安装
npm install -g webpack-cli
//安装到你的项目目录
npm install --save-dev webpack-cli

三、正式创建一个项目

以下安装都是安装到项目目录的

1、创建一个文件夹，如：webpack-test
2、在文件夹下打开cmd，敲下命令行：

npm init --yes

这样就得到了一个默认的最基本的package.json文件，用于npm包管理
最后的package.json如下：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}

3、安装webpack
敲下命令行：

npm install --save-dev webpack

4、安装webpack-cli
敲下命令行：

npm install --save-dev webpack-cli

5、编写html以及js文件
在根目录下创建两个目录，分别为public，是打包后的文件的输出目录，app目录是我们的入口文件存放的目录

最后的项目结构如下：

在这里插入图片描述

6、app目录下，入口文件main.js

import greeter from "./Greeter.js";

document.querySelector("#root").appendChild(greeter());

console.log(__dirname)

7、app目录下，Greeter.js（生成一个div标签）

module.exports = function () {
    let greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    return greet;
};

8、public目录下，index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Sample Project</title>
</head>
<body>
    <div id="root">

    </div>
    <script src="bundle.js"></script>
</body>
</html>

到此，编码工作完成，我们要做的就是用webpack以main.js为入口文件将Greeter.js按照commonJs规范引入进来，经过webpack打包，在public目录下生成打包好的js文件，取名为bundle.js，引入到html中，这样打开html，就可以看到效果了。

四、webpack的运行

这里介绍三种webpack打包方式：
1、webpack可以在终端中使用，在基本的使用方法如下：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令

node_modules/.bin/webpack app/main.js public/bundle.js

以上是webpack3.X的使用方式，在4.X环境中使用可能会报错
可以用

node_modules/.bin/webpack app/main.js  --output public/bundle.js
node_modules/.bin/webpack app/main.js -o public/bundle.js

结果如下：

在这里插入图片描述
可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果

或者用webpack4推荐使用的方式：

webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是’./src/index.js’，输出路径是’./dist/main.js’，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
此种方式不太灵活

2、通过配置文件来使用Webpack

Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如前面提到的，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。

继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

module.exports = {
    entry: __dirname + "/app/main.js",//唯一入口文件
    // mode: 'development',
    //devtool: 'source-map',
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
}

有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项，示例如下：
在这里插入图片描述

3、用npm的scripts打包

在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}

注：package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build

五、webpack打包后的js文件的调试

webpack在非开发模式下打包后生成的js文件是混淆并且压缩了的，我们可能很难看懂，并且在浏览器的sources中也不能打断点调试，可以用webpack中的sourcemap配置调试。
1、在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。
2、我们用source-map来测试

module.exports = {
    entry: __dirname + "/app/main.js",//唯一入口文件
    // mode: 'development',
    devtool: 'source-map',
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
}