廊坊网站建设-纵横网络+网站,python语言,各大网站推广软件,网站怎么收费的1.1何为Webpack
webpack是开源的JS模块打包工具
核心功能是解决模块之间的依赖#xff0c;吧哥哥模块按照特定的规则和顺序组织在一起#xff0c;最终合并为一个JS文件。这个过程叫模块打包
1.2为何需要Webpack
1.2.1何为模块
在设计程序结构时#xff0c;更好的组织方…1.1何为Webpack
webpack是开源的JS模块打包工具
核心功能是解决模块之间的依赖吧哥哥模块按照特定的规则和顺序组织在一起最终合并为一个JS文件。这个过程叫模块打包
1.2为何需要Webpack
1.2.1何为模块
在设计程序结构时更好的组织方式是按照特定的功能将其拆分为多个代码段每个代码段实现一个特定的目的。可进行独立的设计开发测试最终通过接口来组合在一起这就是基本的模块化思想。
1.2.2 JavaScript中的模块
JavaScript中没有模块Brendan Rich最初设计语言只定位成小型脚本语言。再过去很长时间只能通过script标签将他们一个个插入页面缺点很多
需要手动维护加载顺序依赖关系隐式每个script意味一次请求拖慢网页渲染速度每个script标签顶层作用域即全局作用域容易造成全局作用域的污染。
模块化解决了上述问题
通过导入导出语句清晰看到模块间的依赖关系模块可以借助工具进行打包在页面中只需要加载合并后的资源文件减少网络开销多个模块之间作用域隔离彼此不会用命名冲突
2015年 ES6正式定义了JavaScript模块标准已得大多数现代浏览器支持但实际应用方面还需要等待一段时间主要原因
无法使用 code splitting 和 tree shaking大多数npm模块还是CommonJS形式浏览器不支持其语法没法世界拿来用仍然需要考虑个别浏览器及平台的兼容性问题
那么如何让我们的工程在使用模块化的同时也能正常运行在浏览器中就到了模块打包工具的出场了。
1.2.3模块打包工具
任务是解决模块间的依赖使其打包后的结果能运行在浏览器上。工作方式主要分两种
将存在依赖关系的模块按照特定规则合并为单个JS文件一次全部加载进页面在页面初始时加载一个入口模块其他模块一步的进行加载
目前社区中比较流行的模块打包工具Webpack、Parcel、Rollup等
1.2.4 为何选择Webpack
1) Webpack默认支持多种模块标准包括AMD、CommonJS,以及最终的ES6模块
2Webpack有完备的代码分割code splitting解决方案
3Webpack可以处理各种类型的资源
4Webpack拥有庞大的社区支持。
1.3安装
安装Node.js环境
node -v
npm -v
npm安装Webpack方式一种全局安装一种本地安装
全局安装Webpack好处是npm帮我们绑定一个命令行环境变量一次安装处处运行
本地安装则会添加其成为项目中的依赖只能在项目内部使用。
建议本地安装方式主要原因
全局安装与他人进行项目协作时由于每个人系统中Webpack版本不同可能会导致输出结果不一致部分依赖于Webpack的插件会调用项目中的Webpack的内部模块这种情况下仍然需要在项目本地安装Webpack而如果全局本地都用则容易混淆
新建一个工程目录
npm init
生成一个package.json文件
安装Webpack命令
npm i webpack webpack-cli --save-dev
webpack是核心模块webpack-cli则是命令行工具在本例中两者是必需的
安装结束后在命令行执行npx webpack -v 以及 npx webpack-cli -v 可显示各自的版本号即证明安装成功
1.4打包第一个应用
工程目录添加以下几个文件
index.js
import addContent from ./add-content.js;
document.write(my first Webpack app.br /);
addContent();add-content.js
export default function () {document.write(Hello world!);
}index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleMy first Webpack app./title/headbodyscript src./dist/bundle.js/script/body
/html
在控制台输入打包命令
npx webpack --entry./index.js --output-filenamebundle.js --modedevelopment
打包效果 用浏览器打开index.html,如图 回顾指令
entry是资源打包入口。webpack从这里开始进行模块查找
output-filename是输出资源名打包完成出现dist目录包含bundle.js是Webpack打包结果
mode是打包模式development、production、none),当置于development和production模式下自动添加适合当前模式的一系列配置减少人为工作量。开发环境一般设置为development模式
1.4.2使用npm script
为了使命令行指令简洁我们可以在package.json中添加一个脚本命令
scripts: {build: webpack --entry./index.js --output-filenamebundle.js --modedevelopment},
重新打包输入npm命令即可
npm run build
1.4.3使用默认目录配置
通常我们分别设置源码目录与资源输出目录
工程中创src目录并将index.js和add-content.js移动到该目录下资源输出目录Webpack已经默认是/dist,源代码入口Webpack默认就是src/index.js。可以省略掉entry配置
编辑package.json:
scripts: {build: webpack --output-filenamebundle.js --modedevelopment},
1.4.4使用配置文件 Webpack有非常多的配置项以及对应的命令行参数
npx webpack -h 当项目需要越来越多的配置项时命令维护困难。所以创建一个配置文件在Webpack每次打包是读取该配置即可
工程下创建 webpack.config.js
module.exports {entry: ./src/index.js,output: {filename: bundle.js,},mode: development,
};
值得注意的是Webpack对于output.path的要求是使用绝对路径从系统根目录开始的完整路径之前我们在命令行中为了简洁所以使用了相对路径而在webpack.config.js中我们通过调用node.js的路径拼装函数——path.join,将__dirname与dist连接起来得到了最终的资源输出路径。
去掉package.json中配置的打包参数了
scripts: {build: webpack},
1.4.5webpack-dev-server
提高调试效率的本地开发工具 文件修改自动刷新
npm install webpack-dev-server --save-dev
ps:--save-dev将工具作为devDependencies开发环境依赖,工程上线时要进行依赖安装可以通过
npm install --production过滤掉devDependencies中的模块
为了便捷启动webpack-dev-server,添加dev指令
scripts: {dev: webpack-dev-server,build: webpack},
更改webpack.config.js
module.exports {entry: ./src/index.js,output: {filename: ./bundle.js,},mode: development,devServer: {publicPath: /dist,}
};
添加devServer对象专门放webpack-dev-server配置。webpack-dev-server可以看做服务者接收浏览器请求将资源返回。当服务启动时会先让Webpack进行模块打包并将资源准备好。当接收到浏览器的资源请求时会首先进行URL地址校验。如果改地址是资源服务地址上面配置的publicPath,就从打包结果中寻找该资源返回浏览器。反之地址不属于资源服务地址则直接读取硬盘中的源文件并将其返回。
webpack-dev-server两大职能
1.令Webpack进行模块打包并处理静态资源文件请求
2.作为普通的Web Server,处理静态资源文件请求
