这系列文章就是手把手教你如何从零构建一个webpack项目。目的就是为了了解webpack打包怎么玩的,平常项目开发中所用如ES6语法、less、vue是如何被打包的,是一个比较基础的内容,我也是为了总结一下这方面的知识点,梳理一下个人的知识体系而写下这些文字。 工具及版本:vscode、webpack(v4.41.5)、node(v10.16.0) git仓库:webpack-demo
webpack
是一个模块打包工具,可以打包js、图片资源啊等等,功能十分强大,但是在最开始的时候呢,webpack
只是个js模块打包工具。现在就让我们回到webpack最初的模样,从怎么用它打包js文件开始。npm init
初始化生成一个package.json文件。(这里一路回车下一步下一步就行,或者npm init -y
直接生成一个默认的文件)$ cd webpack-demo/chapter1
$ npm init -y
src
文件夹并在其中新建一个index.js
文件:var div = document.createElement("div");
div.innerText = "hello world";
document.body.appendChild(div);
index.html
文件:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack从0到1</title>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
index.html
文件也能显示出"hello world"。 webpack-demo/chapter1
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
webpack
,可以全局安装也可以本地安装,我推荐本地安装,这样可以避免与他人合作开发时由于webpack版本号不一致而导致的打包问题。具体:官网webpack安装 # 本地
$ npm install webpack webpack-cli --save-dev
# 全局
$ npm install webpack --global
--save-dev
和--save
两个有啥子区别呢? --save-dev
可以简写为-D
,这个会自动把模块和版本号添加到package.json中的devDependencies
部分。--save
可以简写为-S
,这个会自动把模块和版本号添加到dependencies
部分。在安装一个要打包到生产环境的安装包时,你应该使用
npm install --save
,如果你在安装一个用于开发环境的安装包(例如,linter, 测试库等),你应该使用npm install --save-dev
。请在npm文档中查找更多信息。 —— 引用来自webpack官网教程的解释。 还有我网上搜的另一个解释我也觉得很直观啊:--save-dev
是你开发时候依赖的东西,--save
是你发布之后还依赖的东西。 比如,你写ES6代码,如果你想编译成ES5发布那么babel就是devDependencies
。如果你用了jQuery
,由于发布之后还是依赖jQuery,所以是dependencies
。 —— 引用segmentfaul提问
package.json
中多出的这几行东西。{
...
+ "devDependencies": {
+ "webpack": "^4.41.5",
+ "webpack-cli": "^3.3.10"
+ }
...
}
(1)第一种方式--使用默认打包的模式
$ npx webpack
执行
npx webpack
,会将我们的src/index.js
作为入口文件,然后会新建一个dist文件夹和dist/main.js
作为输出文件。npx webpack
简单一点来说就是会去找项目中本地的./node_modules/.bin/webpack
,然后中执行它。
dist
文件夹和打包好的main.js
文件了。(2)第二种方式--使用配置文件打包
webpack.config.js
配置文件。 webpack-demo/chapter1
|- package.json
|- index.html
|- /src
|- index.js
+ |- webpack.config.js
webpack.config.js
中写:// 引入node中的path模块
const path = require('path');
module.exports = {
// 定义入口文件,告诉webpack我要打包啥
entry: './src/index.js',
// 定义输出文件,告诉webpack打包好的文件叫啥,给我放到哪里
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
webpack-cli
提供的命令行(这就是我们为什么要安装webpack-cli的原因):$ npx webpack --config webpack.config.js
(3)第三种方式--使用npm脚本
webpack-cli
命令打包的方式不够简洁明了,一般我们会在package.json
中的scripts
中定义一条命令。{
...
+ "scripts": {
+ "build": "webpack"
+ }
...
}
webpack.config.js
文件然后执行它。$ npm run build
src/index.js
文件已经通过webpack打包后输出为dist/main.js
了,这个时候我们还得引用它,所以复制一份index.html
文件到dist
文件夹下。 webpack-demo/chapter1
|- package.json
|- /dist
+ |- index.html
|- main.js
|- index.html
|- /src
|- index.js
dist/index.html
文件内容改为:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack从0到1</title>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>
dist/index.html
同样也可以看到hello world
在屏幕中显示出来了,我们就简单了完成了一个js文件打包的过程。参考链接