Webpack 快速入门

1、webpack简介

webpack英文文档，webpack中文文档1，webpack中文文档2

思维导图 https://www.processon.com/view/5f65539d6376894e3278e0d8#map

Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递 归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中。

Webpack是⼯程化、⾃动化思想在前端开发中的体现。

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

2、安装webpack

2.1、环境准备

webpack是基于nodejs环境来运行的，所以在安装使用webpack之前要先安装nodejs环境，建议安装最新稳定（LTS）版NodeJs。

NodeJs下载地址： 英文 https://nodejs.org/en，中文 https://nodejs.org/zh-cn

注：如果安装版本是webpack v4以上的版本时，还需要额外安装webpack-cli，两者缺一不可！

2.2、全局安装 不推荐

# 全局同时安装webpack 和 webpack-cli
npm install webpack webpack-cli -g		# -g 参数表示全局安装

# 安装完成后，检查版本
webpack -v

# 如果要卸载时
npm uninstall webpack webpack-cli -g

​ 全局安装webpack，会将你项⽬中的webpack锁定到指定版本（也是就固定了webpack的版本），造成不同的项⽬中因为webpack依赖不同版本⽽导致冲突、出错等、构建失败情况！

所以一般在开发过程中不同的项目、代码框架所以的使用的webpack版本不一致，所以跟着项目走是最佳选择！

2.3、项⽬(局部)安装 【推荐】

# 安装最新的稳定版本
npm i -D webpack	# -D 参数表示局部安装

# 安装指定版本
npm i -D webpack@<version> # 如：npm i -D webpack@4.2.0

# 安装最新的体验版本 可能包含bug,不要⽤于⽣产环境
npm i -D webpack@beta

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

# 同时局部安装
npm install webpack webpack-cli -D

2.4、检查安装情况

# command not found 默认在全局环境中查找
webpack -v

# npx帮助我们在项⽬中的node_modules⾥查找webpack
npx webpack -v

# 到当前的node_modules模块⾥指定webpack
./node_modules/.bin/webpack -v

2.5、webpack升级

官方文档： https://webpack.docschina.org/migrate

3、构建webpack项目

3.1、 创建项目文件夹、安装webpack依赖

# 1、在任意的某个目录下，打开命令行工具 创建一个项目文件夹，用于存放webpack相关的配置文件、静态资源、代码等，如果是用Vue,React,Angular等框架时，框架会在项目初始化时自动创建的，文件夹名在这里以my-webpack名字为例。

mkdir my-webpack # my-webpack 就是webpack项目文件夹的名字，是自定义的。
cd my-webpack # 进入my-webpack这个目录文件夹中

# 2、初始化package.json配置文件  
npm init # 填写package.json相关信息如：name、version、description、keywords、author等
或
npm init -y # 如果不填写，就在后面加上 -y 参数跳过填写

# 3、项⽬(局部)安装webpack 和 webpack-cli
npm install webpack webpack-cli -D

# 4、检查安装情况，由于这里是局部安装的，用npx帮助我们在项⽬中的node_modules⾥查找webpack
npx webpack -v
或
npx webpack-cli -v

# 执行npx webpack -v 命令后会输出webpack的版本号。

3.2、准备执行构建目录和文件

1、在my-webpack目录中，创建一个名为 src 的文件夹。

2、为了便于打包测试，我们在src⽂件夹中 新建src/index.js、src/data.json、src/other.js 这3个文件用来测试。

注：webpack打包需要一个入口文件，默认情况下 src/index.js 是webpack的入口文件

# data.json
{
    "name": "JOSN",
    "age": 28
}

# other.js
export function sum(n1, n2) {
    return n1 + n2;
};

# index.js
const json = require("./data.json");	//CommonJS 方式
import { sum } from "./other.js";		//ES Module 方式
console.log('Hello Webpack：', json, sum(2, 3));

3.3、执行构建（执行打包）

1、用 npx 方式执行打包命令

npx webpack

2、自定义构建命令（自定义构建命令的原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接，不用npx也能执行webpack命令）

// 修改package.json文件，在scripts选项中 添加 "build": "webpack"
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},

2.1、用自定义构建命令 来 执行打包

npm run build  # build 就是上面自定义的打包命令名字，可以自定义的！！

3.4、构建成功

​ 当执行npx webpack 或 npm run build 打包命令后，发现会在my-webpack目录中生成一个dist文件夹，里面有个main.js文件，而这个main.js就是打包后的bundle文件啦！

这个main.js⽂件是⼀个标准的、可执⾏的JavaScript⽂件，⾥⾯包含webpackBootstrap启动函数 和 chunk，到此webpack的一个最简打包流程就OK了！！

3.5、默认配置

在webpack4.x以后，说是零配置打包（其是零配置是很弱的，如果在有特定的需求时，我们总是需要⾃⼰进⾏配置的），所以webpack也提供了一个默认的自定义配置⽂件，叫 webpack.config.js 。

我们可以对这个⽂件进⾏修改，进⾏个性化配 置因为它做的默认配置，在webpack.config.js中我们可以对webpack进行一系列配置！

注：如果不想使⽤webpack.config.js这配置⽂件名也是可以修改的： ⽐如改为my-webpack-config.js，通过修改package.json文件中的 --config 来指定 webpack使⽤哪个配置⽂件来执⾏构建。

// 修改package.json文件，在scripts选项中 配置 "build": "webpack --config ./my-webpack-config.js"
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./my-webpack-config.js"
  },

通过以上修改后，在执行npm run build命令时，webpack就会去执行my-webpack-config.js文件中的配置啦！！

默认情况下webpack.config.js这个文件是不存在的，所以要在和package.json平级的目录中，创建一个名为webpack.config.js的文件（这里文件名也是可以自定义的，只是webpack在构建时会先去找默认的webpack.config.js文件），用于存放webpack的配置信息，以下是webpack的基础配置结构：

# webpack.config.js
const path = require("path");

module.exports = {
    // 必填 webpack执⾏构建⼊⼝文件
    entry: "./src/index.js",
    
    output: {
        // 将所有依赖的模块合并输出到main.js
        filename: "main.js",
        // 输出⽂件的存放路径，必须是绝对路径
        path: path.resolve(__dirname, "./dist")
    }
};

4、webpack配置核心概念

4.1 先来体验一下修改webpack.config.js配置后的效果

# webpack.config.js
const path = require("path");

module.exports = {
    // 必填 webpack执⾏构建⼊⼝文件
    entry: "./src/index.js",

    output: {
        // 将所有依赖的模块合并输出到test.js
        filename: "test.js",
        // 输出⽂件的存放路径，必须是绝对路径
        path: path.resolve(__dirname, "./build") //执定输入到一个名为build的这个文件夹中
    }
};

# webpack.config.js
const path = require("path");

module.exports = {
    // 开发模式（不会压缩和丑化代码）
    mode: "development", // mode的值有：node、development、production

    // 必填 webpack执⾏构建⼊⼝文件
    entry: "./src/index.js",

    // 输出配置
    output: {
        // 将所有依赖的模块合并输出到test.js
        filename: "test.js",
        // 输出⽂件的存放路径，必须是绝对路径
        path: path.resolve(__dirname, "./build") //执定输入到一个名为build的这个文件夹中
    }
};

注：如果给vue项目中的webpack.config.js配置文件加 mode: "development" 的话需要将对象作为函数来配设，不然在构建时可能会报错，具体代码如下：

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
 
    configureWebpack: config => {
        // 开发模式（不会压缩和丑化代码）
        config.mode = "development",  // mode的值有：node、development、production

        // 必填 webpack执⾏构建⼊⼝文件
        config.entry = "./src/index.js",

        // 输出配置
        config.output = {
            // 将所有依赖的模块合并输出到test.js
            filename = "test.js",
            // 输出⽂件的存放路径，必须是绝对路径
            path: path.resolve(__dirname, "./build") //执定输入到一个名为build的这个文件夹中
        },

        // 配置代理服务器
        config.devServer = {
            proxy: {
                '/api': {
                    target: 'http://www.xxx.com',
                    ws: true,
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }
  
};

为了便于查看打包后的test.js代码，配置mode: "development"后，在构建时就不会出现警告，test.js中的代码也不到被压缩和丑化啦！！

Webpack 配置项

// webpack.config.js

module.exports =  { 
    amd?, 
    bail?, 
    cache?, 
    context?, 
    dependencies?, 
    devServer?, 
    devtool?, 
    entry?, 
    externals?, 
    infrastructureLogging?, 
    loader?, 
    mode?, 
    module?, 
    name?, 
    node?, 
    optimization?, 
    output?, 
    parallelism?, 
    performance?, 
    plugins?, 
    profile?, 
    recordsInputPath?, 
    recordsOutputPath?, 
    recordsPath?, 
    resolve?, 
    resolveLoader?, 
    serve?, 
    stats?, 
    target?, 
    watch?, 
    watchOptions? 
}

敬请期待，后续更新。。。！