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

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

1.webpack核心配置

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

webpack核心配置:

2.webpack准备工作

安装node

nodejs官方网站下载

安装好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":"[email protected]"}
    ],
    "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":"[email protected]"
    },
    "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指定项目开发所需要的模块

版本格式

ssl

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)