1、安装node.js
https://nodejs.org/zh-cn/
https://nodejs.org/dist/v14.18.1/node-v14.18.1-x64.msi // 长期维护版 windows
https://nodejs.org/dist/v14.18.1/node-v14.18.1-linux-x64.tar.xz // 长期维护版 linux
2、创建项目目录
mkdir webpack-demo
cd webpack-demo
3、初始化
npm init -y
此时文件夹里会多出一个文件 package.json
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
4、安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
// 在目录webpack-demo的本地安装webpack和webpack-cli
// 其中webpack-cli用于在命令行上运行webpack命令
此时webpack-demo目录下会多出node_modules目录(如果使用的是npm 5+,则webpack-demo目录还会多出一个package-lock.json文件)
5、继续创建相关文件和目录
创建目录src,并在src里创建index.js文件,脚本内容为:
index.html的内容为:
我们在index.html中引入了需要的lodash。
我们直接在浏览器访问index.html,得到结果:
设置当前的项目为私有项目,不允许发布到npm的仓库中。
我们之所以能通过npm install --save-dev webpack安装webpack,是因为webpack这个项目被发布到了npm的仓库中。
但在这里,我们不想将webpack-demo放到npm的仓库中,不想让别人安装。(虽然不够格)
同时,我们移除main入口。
对比原package.json文件,发现少了main入口。
关于package.json的更多信息,请参考:https://docs.npmjs.com/files/package.json
在两个位置的script标签之间,是存在隐式依赖的:index.js依赖于lodash的,如果不提前加载lodash,则index.js无法运行,会导致程序报错。
从上面的写法看,我们看不出index.js依赖于lodash,即使删除index.html中关于lodash的引入,也无法看到报错,除非在浏览器中查看index.html。
此时,使用webpack可以解决上面的三个问题。
6、webpack开始派上用场
首先调整目录结构:
dist目录:分发代码文件夹,用于存放分发代码。
src目录:源代码文件夹,用于存放源代码。
源代码是指用于书写和编辑的代码。
分发代码是指经过最小化和优化后产生的代码,最终将在浏览器中加载。
注意:为了演示,所以上面的dist/index.html是我们手动创建并编辑的,真正使用时,
会由webpack自动创建和更新index.html,无须人工干预。
为了使用webpack命令将lodash打包到index.js文件中,我们需要提前将lodash安装到本地,方便webpack使用。
npm install --save lodash
这里需要讲一个区别:
npm install --save lodash
npm install --save-dev webpack webpack-cli
我们安装webpack和webpack-cli,是因为我们需要用到webpack命令来打包,它仅仅是将文件打包而已,是作为开发辅助工具出现的。
因此是--save-dev。
我们安装lodash是因为项目的运行需要用到它,如果不安装它,则项目无法运行。
因此是--save(或者不写,npm install lodash,默认会自动带上--save)。
现在,在我们的index.js中引入依赖:
打包
执行 npx webpack 命令来打包
index.js和lodash.js被打包成了一个文件:main.js,该文件被放到了dist目录下。
现在的目录结构是:
我们看一下main.js的内容:
发现内容是经过压缩的。
然后修改index.html文件:
官方文档中称 main.js 是一个bundle,英文翻译为 包。确实,它是经过许多文件编译后形成的最终包文件。
在index.js文件中,我们显式通过import语句导入lodash,然后将它绑定为 _(没有全局作用域污染)。
通过声明模块所需的依赖,webpack 能够利用这些信息去构建依赖图,然后使用图生成一个优化过的 bundle,并且会以正确顺序执行。
可以这样说,执行 npx webpack,会将我们的脚本 src/index.js 作为 入口起点,也会生成 dist/main.js 作为 输出。
在浏览器中访问dist/index.html:
跟刚才的结果一样。
7、webpack的配置文件
webpack.config.js
配置文件中设置了入口文件和输出文件。
webpack的入口文件默认就是src/index.js,输出文件默认就是dist/main.js,因为刚才我们没有webpack.config.js,也是这样生成的。
打包时,指定配置文件:
执行npx webpack,如果本地存在webpack.config.js,则webpack默认会使用它;
执行npx webpack,如果本地不存在webpack.config.js,则webpack根据默认情况来打包;
这里使用 --config 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。
也就是说webpack.config.js不是规定的名字,你可以使用任何其他名字的文件。
在配置文件webpack.config.js中,可以指定 loader 规则(loader rule)、plugin(插件)、resolve 选项,以及许多其他增强功能。
8、快捷方式
我们之前是使用 npx webpack 来完成打包的。
在package.json的scripts部分增加:
这个快捷方式的作用是:
原先的 npx webpack 可以使用 npm run build 来替代了。
npm run build 被称为 npm scripts。
npm run build 和 npx webpack一样,都可以通过模块名引用本地安装的 npm packages。
在使用 快捷方式 的同时,向webpack传递自定义参数:(这里只是举例,并不是只有--color一个参数)