webpack读书笔记——webpack简介及安装什么是webpack webpack是一个打包工具，他的宗旨是一切静态

什么是webpack

webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Less，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack的安装

前提条件

在安装webpack之前，确保安装了Nodejs的最新版本。

本地安装

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
# 或指定版本
npm install --save-dev webpack@<version>
// --save-dev 可简写为-D

Tip

是否使用 --save-dev 取决于业务应用场景。假设你仅使用 webpack 进行构建操作，那么建议你在安装时使用 --save-dev 选项，因为可能你不需要在生产环境上使用 webpack。如果需要应用于生产环境，请忽略 --save-dev 选项。

全局安装

通过以下 NPM 安装方式，可以使 webpack 在全局环境下可用：

npm install --global webpack // --global 可简写为-g

webpack核心概念

1、Entry（入口）： 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

2、Output（输出）： 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

3、Loader（模块转换器）： webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

4、Plugins（插件）： loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。包括：打包优化，资源管理，注入环境变量。

5、Module(模块)： 在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为模块。

在webpack里一个模块对应着一个文件，webpack会从配置的 Entry 开始递归找出所有依赖的模块。

webpack简单打包案例

一、准备工作

新建一个空文件夹用于创建项目，如下我在本地创建了一个名static_demo的文件夹，使用终端进入文件夹，使用npm init 命令初始化一个package.json文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过如果你不打算发布这个模块，直接一路回车就好。（也可以使用npm init -y这个命令来一次生成package.json文件，这样终端不会询问你问题，便于处理，我是直接输入的npm init -y命令）。

二、安装webpack

接下来在命令行中输入以下命令安装 webpack，如果你想一步到位的话，就把全局 webpack 和本地项目 webpack 全都先装了，因为后面一些模块会用到。

npm install webpack -g               // 安装全局webpack命令
npm install webpack webpack-cli -D  // 安装本地项目模块

三、创建文件

在static_demo文件夹下新建两个文件夹，分别为src文件夹和build文件夹，接着在src文件夹下新增index.js文件和data.json文件，在build文件夹下新增index.html文件。此时项目结构如下

在index.js中导入 data.json 模块，此时index.js文件内容如下：

import data from './data.json'
console.log(data)

function add(x, y) {
    return x + y
}
console.log(add(1,2))

在index.html下引入打包后的js文件 main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 打包</title>
</head>
<body>
    <h1 id="title">hello webpack</h1>
    <script src="./main.js"></script>   <!-- 这是打包后的js文件，默认名称main.js --> 
</body>
</html>

四、执行打包命令

在终端输入命令行执行打包

// webpack全局安装的情况下，output后面的是打包后的文件路径

webpack ./src/index.js -o ./build --mode=development // --output可简写为-o

// 上述命令相当于把src文件夹下的index.js文件打包到build文件夹下的main.js，这样就生成了打包后的文件供index.html引入

可以看出webpack同时编译了index.js和data.json，因为index.js文件引入了data.json模块，现在打开index.html看看结果

我们已经成功使用webpack进行打包，这时小伙伴要说了，每次都在终端中输入这么长的命令，感觉好烦啊，接下来学习通过配置文件来使用webpack

五、通过配置文件来使用webpack

在当前项目的根目录下新建一个配置文件webpack.config.js，我们写下如下简单配置代码，目前只涉及入口配置（相当于我们的index.js，从它开始打包）、出口配置（相当于我们打包生成的main.js）、模式配置。

/**
 * webpack 的配置文件
 * 指示 webpack 都做哪些工作
 */
// resolve 用于拼接绝对路径的方法
const { resolve } = require('path')

module.exports = {
    // webpack 打包的入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 输出的路径
        // --dirname是node.js的一个全局变量，表示当前执行脚本所在的目录
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        // 详细的loader配置
        rules: [
            
        ]

    },
    // plugins的配置
    plugins: [
        // 详细的plugins的配置
    ],
    // 模式  默认是生产环境 production
    mode: 'development'
}

有了这个配置文件，我们只需在终端中运行webpack命令就可进行打包，这条命令会自动引用webpack.config.js文件中的配置选项

六、package.json文件中自定义脚本命令

Node项目一般都有一个package.json文件，该文件用于描述当前项目，其中有一个scripts属性，该属性可以自定义脚本命令，例如我们运行的打包命令，那么可以在scripts里添加自定义脚本为：

之后就可以使用npm run build来运行该脚本命令，这样有什么好处呢？如果命令行很短，好处当然不明显了，但是如何命令行很长呢？那么我们可以在这里添加每次都需要执行的命令，配置了scripts后， npm run key值相当于在终端运行了value值

webpack读书笔记——webpack简介及安装