Webpack介绍和使用(配置环境变量,打包依赖)

原创 灿烂_ 随笔 打包工具 299阅读 2019-04-15 08:41:11 举报

webpack介绍和使用

webpack是一个前端模块化打包工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。主要由入口,出口,loader,plugins四个部分。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

devDependencies 节点下的模块是我们在开发时需要用的,比如项目中使用的 gulp ,压缩css、js的模块。这些模块在我们的项目部署后是不需要的,所以我们可以使用 -save-dev 的形式安装。官网:https://www.webpackjs.com/concepts/

webpack的四个概念

入口entry

新建一个项目文件,在目录下新建webpack.config.js文件,根据这个配置文件里的配置内容进行处理项目有关文件。编写此文件,需要遵循commonJS的规范。可以直接执行Git命令webpack来运行,如果是其他的名字,执行webpack--config 打包文件名命令来打包。

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。++进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。++

出口output

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist
基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。
你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

在filename中加入[hash:5]表示文件名后会跟上5位哈希值。

配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

loader

处理非JavaScript文件,比如.less文件,.css文件等。
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。
配置两个属性:textuse

test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性,表示进行转换时,应该使用哪个 loader。

style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。
详见:https://juejin.im/post/5a2668996fb9a0450b663f20

插件plugins

插件可以完成更多 loader 不能完成的功能。

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。

多数插件可以通过选项(options)自定义。

你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new操作符来创建它的一个实例。

使用每个插件前都要npm命令安装在该项目文件夹下。

开启本地服务器

在项目文件中安装 npm install webpack-dev-server -g

再次安装局部环境npm install webpack-dev-server -D

执行 webpack-dev-server

webpack-dev-server --open 在默认浏览器里打开

webpack-dev-server --open --color执行完后会有高亮提醒

关于配置本地服务器这里有篇不错的博文:https://www.jianshu.com/p/cbc7d342fe2f

热更新

全称 hot module replace 局部修改正在更新的部分 不需要一直发请求
是webpack的内置插件

配置环境变量

开发环境

生产环境

通过看dist下的main/index.js代码是否压缩来判断是开发环境还是生产环境

package.json

创建一个项目,新建文件夹后,建立src目录,创建index.js,在根目录Git bush here输入命令npm init -y,初始化npm,-y表示一路yes

通过 npm 来控制项目及文件, npm run dev 打包开发版本, npm run prod 打包生产版本。

通过npm命令安装的工具包 都在 package.json 文件中的 devDependences

我们从Github上,将带有npm的项目clone下来,在项目的跟目录下面直接 npm install ,系统会根据package.json里的依赖包devDependencies属性,将需要的依赖下载下来。

package-lock.json

概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

根据官方文档,这个package-lock.json 是在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

它有什么用呢?因为npm是一个用于管理package之间依赖关系的管理器,它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本

这里举个例子:

"dependencies": {
"@types/node": "^8.0.33",
},

这里面的 向上标号^是定义了向后(新)兼容依赖,指如果 types/node的版本是超过8.0.33,并在大版本号(8)上相同,就允许下载最新版本的 types/node库包,例如实际上可能运行npm install时候下载的具体版本是8.0.35。

大多数情况这种向新兼容依赖下载最新库包的时候都没有问题,可是因为npm是开源世界,各库包的版本语义可能并不相同,有的库包开发者并不遵守严格这一原则:相同大版本号的同一个库包,其接口符合兼容要求。这时候用户就很头疼了:在完全相同的一个nodejs的代码库,在不同时间或者不同npm下载源之下,下到的各依赖库包版本可能有所不同,因此其依赖库包行为特征也不同有时候甚至完全不兼容。

因此npm最新的版本就开始提供自动生成package-lock.json功能,为的是让开发者知道只要你保存了源文件,到一个新的机器上、或者新的下载源,只要按照这个package-lock.json所标示的具体版本下载依赖库包,就能确保所有库包与你上次安装的完全一样。

package-lock.json | 官方文档

semver 语义化版本号变更

^ 是npm默认的版本符号, 当你使用npm install --save时, npm会自动在package中添加^加上版本号. 例如: npm install --save angular会在package.json中添加"angular": "^1.3.15".这个符号会告诉npm可以安装1.3.15或者一个大于它的版本, 但是要是主版本1下的版本.

~ 同样被用来做npm得版本控制, 例如~1.3.15, 代表了npm可以安装1.3.15或者更高的版本, 与^的区别在于, ~的版本只能开始于次版本号1.3. 它们的作用域不同. 你可以通过npm config set save-prefix='~'将~设置为默认符号.

>符号主要是用来指定可以安装beta版本.

semver版本号 | 官方文档

webpack学习推荐(这个挺好):https://www.cnblogs.com/dashnowords/p/9572755.html
webpack资源汇总(腾讯web前端团队):https://github.com/webpack-china/awesome-webpack-cn

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复