没有合适的资源?快使用搜索试试~ 我知道了~
首先原谅我是个标题党,我虽然不是大神,但这是我自己对webpack构建工具编译过程和编译结果的分析的理解。 webpack的安装和使用 webpack概念:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。 webpack官网:https://www.webpackjs.com/ webpack的安装 webpack通过npm安装,它提供了两个包: webpack:核心包,包含了webpack构建过程中要用到的所有api webpack-cli
资源推荐
资源详情
资源评论
大神眼中的大神眼中的webpack构建工具:对编译原理的分析构建工具:对编译原理的分析
首先原谅我是个标题党,我虽然不是大神,但这是我自己对webpack构建工具编译过程和编译结果的分析的理解。
webpack的安装和使用的安装和使用
webpack概念概念:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程
(压缩、合并),最终生成运行时态的文件。
webpack官网:https://www.webpackjs.com/
webpack的安装的安装
webpack通过npm安装,它提供了两个包:
webpack:核心包,包含了webpack构建过程中要用到的所有api
webpack-cli:提供一个简单的cli命令,它调用了webpack核心包的api,来完成构建过程
webpack也是有两种安装方式,全局安装全局安装和本地安装本地安装,全局安装可以全局使用webpack命令,但是如果你有多个项目,对应不同的webpack版本的话,全局安装就显得捉襟见肘。所
以我们通常使用本地安装,每个项目都是用自己的webpack版本进行构建。我们可以通过以下命令安装我们可以通过以下命令安装webpack和和webpack-cli。仅开发环境使用(。仅开发环境使用(-D))
npm install -D webpack webpack-cli
webpack的使用的使用
打包打包
npx webpack
Hash:总chunk的哈希值
Version:webpack的版本号
Time:构建消耗时间
Built at:打包的时间和模块信息
EntryPoint:入口文件
注意注意:
默认生产环境下进行打包
默认情况下,webpack会以./src/index.js作为入口文件分析依赖关系,打包到./dist/main.js文件中
因为本地安装,所以需要加npx 执行。
开发环境下打包开发环境下打包
npx webpack --mode=development
注意注意: 通过--mode选项可以控制webpack的打包结果的运行环境
生产环境下打包生产环境下打包
npx webpack --mode=production
在脚本中配置在脚本中配置 package.json
"scripts": {
"build":"webpack --mode=production",
"dev":"webpack --mode=development"
}
到这里,基本就是就是wepack所有的指令了,下面要介绍的就是webpack的各种配置和打包原理了。
在正式学习webpack之前,我认为弄清楚以下几个概念是非常重要的
入口入口(entry):指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
出口出口(output):告诉 webpack 在哪里输出它所创建的 、bundles,以及如何命名这些文件。等等
loader:loader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。当然在转换过程做了一系列的处理操作
插件插件(plugins):loader是用来转换代码的,而插件用来执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。
我会在下面依次具体介绍这四个重要的概念,为了更方便的理解,我先要介绍一下sourece map源码地图、webpack的编译结果和编译过程
source map 源码地图源码地图
在前端工程化中,我们大部分时候不回直接运行源码,而是运行对多个源码文件进行合并、压缩等操作后转换的代码。这样就会出现一个问题,当代码出现错误时,我们不清楚具体
是哪个代码发生了错误。为了方便调试错误代码,就出现了source map
当然这种source map只是为了调试方便,所以我们仅仅是在开发模式上使用。
下面是浏览器处理source map的原理。
资源评论
weixin_38592643
- 粉丝: 2
- 资源: 908
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功