获取全套webpack 4.x教程，请访问瓦力博客

距离上次写webpack时间已经过去2年时间，这期间一直想写webpack教程都由于没有时间而放弃。最近看到女友在慕课网上买了webpack教程，小菜也跟着看了，老师讲的非常好。如果大家有多余的零花钱还有时间，建议大家可以买个课程看看，小菜在文章的最后放上购买二维码，这样也可以给大伙省一点钱，如果手头紧的话那就看小菜写的教程吧！小菜这里默认大家对webpack有一定的了解，如果还不知道webpack是什么，做什么用的。建议先阅读webpack官方文档。

在开始之前，小菜要说明本次PC的操作系统win10，包管理yarn。yarn和npm一样，只是小菜的个人习惯。

• webpack官方文档{:target="_blank"}
• yarn官方网站{:target="_blank"}

1.webpack核心配置

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

webpack核心配置：

• entry(入口)：指示webpack应该使用哪个模块,来作为构建其内部依赖图的开始
• output(出口)：告诉webpack在哪里输出它所创建的bundle以及如何命名这些文件，生成文件后默认放在./dist文件夹中
• module：loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中
• plugin(插件)：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量
• resolve: 配置寻找模块的规则

2.webpack准备工作

安装node

nodejs官方网站下载{:target="_blank"}

安装好nodejs之后，检测node是否安装成功，打开cmd

node -v

创建一个项目

在自己本地磁盘找一个地方，创建一个项目的文件夹。文件夹名字随便起，小菜命令为myProject

初始化项目

进入刚才自己创建的文件夹，初始化项目，生成对应的package.json文件,package.json定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据

yarn init 

/*需要配置选项
question name (testdir):  项目名称
question version (1.0.0):  项目的版本号
question description: 项目的描述
question entry point (index.js): 项目入口文件
question git repository: git的远程仓库地址
question author: 作者
question license (MIT): 协议(默认MIT)
question private: 
*/

成功后，就会在当前文件夹下生成一个package.json文件

package.json

{
  "name": "myProject",
  "version": "1.0.0",
  "description": "webpack测试",
  "main": "index.js",
  "author": "wali",
  "license": "MIT"
}

安装webpack

yarn add webpack
yarn add webpack-cli

文件结构

myProject 
|-src  #源码
|-dist  #编译后的目标文件
|-node_modules  #本地库
|-package.json  
|-webpack.config.js #webpack配置
|-yarn 

一般我们前端开发的工程项目结构就上面那样，对比你们的文件结构，在自己的项目下面建一个src，以后我们开发源码都会在src目录下，dist,node_modules,package.json,yarn目录或文件自动会生成，就是上面大家执行的那几条命令。大家只需要创建src目录和webpack.config.js文件。

3.了解package.json文件

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

{
    "name": "Hello World",
    "title": "标题",
    "version": "0.0.1",
    "author": "wali",
    "contributors":[
        {"name":"李四","email":"lisi@example.com"}
    ],
    "description": "package.json说明",
    "keywords":["node.js","javascript"],
    "repository": {
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"MIT",
    "engines": {
        "node": "0.10.x"
    },
    "bugs":{
        "url":"http://path/to/bug",
        "email":"bug@example.com"
    },
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express3-handlebars": "~0.5.0",
        "MD5": "~1.2.0"
    },
    "devDependencies": {
        "grunt-contrib-clean": "~0.5.0",
        "browserify": "2.36.1",
        "grunt-browserify": "~1.3.0",
    }    
}

必须字段

name

全部小写，没有空格，可以使用下划线或者横线

Version

项目版本号,符合“语义化版本规则”

x.x.x 的格式

可选字段

title

标题

author

作者，一个人

contributors

作者，一组人

description

对项目的描述

Keywords

字符串数组。人们使用 npm search 搜索时发现你的项目

repository

仓库的线上地址

license

授权协议

engines

engines字段指明了该模块运行的平台，比如 Node 的某个版本或者浏览器，既可以指定node版本{ "engines" : {"node" : ">=0.10.3 <0.12" } }

bugs

问题追踪系统的URL或邮箱地址

scripts

scripts是Object类型，Key是生命周期事件名，value是在事件点要跑的命令。当我们执行命令需要设置参数，比如

//本地开发
npx webpack-cli webpack.config.js --confi --colors --mode=development
//生产环境
npx webpack-cli webpack.config.js --confi --mode=production

每次执行上面两条命令就会比较繁琐，如果我们将命令写在scripts里面就方面多了，相当于创建了一个快捷命令。

{
    "scripts":{
        "dev": "npx webpack-cli webpack.config.js --confi --colors --mode=development",
        "dist": "npx webpack-cli webpack.config.js --confi --mode=production"
    }
}

在执行时我们只需要在命令行中执行

yarn run dev
或者
yarn run dist

dependencies

dependencies字段指定了项目运行所依赖的模块

devDependencies

devDependencies指定项目开发所需要的模块

版本格式

• ersion 完全匹配
• >version 大于这个版本
• >=version 大于或等于这个版本
• <version
• <=version
• ~version 非常接近这个版本
• ^version 与当前版本兼容
• 1.2.x X代表任意数字，因此1.2.1, 1.2.3等都可以
• http://... Unix系统下使用的tarball的URL。
• * 任何版本都可以
• ""任何版本都可以
• version1 - version2 等价于 >=version1 <=version2
• range1 || range2 满足任意一个即可
• git... Git地址
• user/repo