为了账号安全,请及时绑定邮箱和手机立即绑定

webpack 准备工作(1)

标签:
webpack

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

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

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

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

ssl

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消