夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
手撕webpack:初体验

基础环境搭建

首先使用IDE创建项目命名为 webpack-demo,笔者使用的是 webstorm,接着使用 npm init 命令初始化 package.json 文件,然后使用 npm install 安装webpack 的模块包,自 webpack 4+ 后需要安装 webpack-cli。

npm install -save-dev webpack webpack-cli

这里笔者推荐使用本地依赖安装的方式,这样更容易升级项目。模块依赖行为使用 devDependencies(开发依赖),即 webpack 只在开发环境构建时才会使用。关于开发依赖和生成环境依赖的知识,请阅读笔者的 NPM install -save 和 -save-dev 傻傻分不清

安装成功后检测下 webpack 使用的版本,笔者这里使用 npx 命令。

npx webpack -v

手撕webpack系列是一个由浅入深的教程,所以笔者花小段篇幅介绍下 npx 命令。

npx 命令介绍

一般来说,调用 webpack ,只能在项目脚本和 package.json 的scripts字段里面, 如果想在命令行下调用,必须像下面这样。

# 项目的根目录下执行
$ node-modules/.bin/webpack -v

npx 就是想解决这个问题,让项目内部安装的模块用起来更方便,只要像下面这样调用就行了。

$ npx webpack -v

npx 的原理很简单,就是运行的时候,会到node_modules/.bin路径和环境变量$PATH里面,检查命令是否存在。

基本使用

完成上一步的安装后,创建一个最简易的项目结构,如图:

src 目录下存放我们的源码,这里只有一个 index.js ,它将做为打包的入口。先在里面编写一段代码,来尝试下打包的结果。

# index.js

function say() {
  console.log('hello word!')
}
say()

这里需要注意的点:webpack 打包的时候会优化掉没有引用的函数或变量,所以要在js文件的末尾调用下say函数。

webpack 提供了 CLI 和 Node.js (代码模式)两种打包方式,做为webpack入门第一篇文章,笔者使用 CLI 方式演示。

在命令行工具 Terminal 中输入如下命令:

npx webpack

从打包过程输出的日志中可以看出,有一个打包入口名为:./src/index.js ,输出为 main.js 。刷新工程项目,发现多了个 dist 文件夹和 main.js 文件。

main.js 内容除了webpack自动生成的代码外还包含了 index.js 的 say 函数 。运行这个 main.js 文件,控制台输出了 "hello word!"。

webpack 命令提供了很多参数,通过这些参数可以控制打包过程。当执行 npx webpack 的时候,会查找 src目录下是否有 index.js ,并将其做为入口文件,没有传入输出配置参数的时候默认会将打包后的结果输出到 dist/main.js 文件。接着我们试着传入打包入口、输出配置参数,来定制个性化输出。

# 设置打包入口为 ./src/index.js,名称为 entry1,输出文件名为 入口名+chunk 内容的 hash
npx webpack entry1=./src/index.js -o dist/[name].[chunkhash].js

关于命令行参数的详情说明请参考:https://www.webpackjs.com/api/cli/

作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

0

支持

0

反对

posted @2020-4-19  拜读(212)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付