转自：https://www.jianshu.com/p/1192cfd4a012
通俗的理解webpack
将各种JavaScript模块或者其他不能直接被浏览器使用的扩展语言，转换打包的过程称为webpack打包
例如：js代码中有export某个方法，这种js不能直接被引用至html中，需要打包编译下才能被引用
创建项目
这里用的是命令创建项目，要可以右键创建
mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
touch app.js // 创建app.js文件
touch main.js // 创建main.js文件
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件
- mkdir：创建文件夹
- cd ..：返回所在目录的上级目录
- touch：创建文件
- app：用来存放原始数据和我们将写的JavaScript模块
-
common：用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）
[图片上传中...(image.png-73ee4d-1575859970236-0)]
目录
image.png
基础代码
index.html是主入口，需要设置根目录并且将打包后的文件导入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
app.js是我们写的模块,并依据CommonJS规范导出这个模块,这里我们以输出welcome to use webpack为例
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "welcome to use webpack!";
return greet;
}
main.js其实是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中
const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter())
准备工作到此结束，下面 开始安装webpack
安装
因为安装webpack要用npm,所以安装之前我们首先要安装node
第一步 要在项目根目录用npm init初始化，生成package.json文件
npm init
初始化过程中会有好多提示，如果非正式项目下可以直接回车调过，括号里的都是默认的,正式项目下可以根据情况填写每一步
name: (webpackDemo) // 项目名称
version: (1.0.0) // 版本号
description: // 项目的描述
entry point: (index.js) // 入口文件
test command: // 测试命令
git repository: // git仓库
keywords: // 关键字
author: // 作者创始人
license: (ISC) //许可:(ISC)
About to write to C:\Users\Administrator\Desktop\webpackDemo\package.json:
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) // 这里直接输入yes就可以了
安装完目录中会多package.json文件夹
image.png
安装webpack
这里只记录安装webpack4，安装webpack2步骤可查看原转载文件，安装webpck4还需要额外安装webpack-cli
npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev
npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装
安装完会多node_modules文件夹，package.json文件也会改变
image.png
使用Webpack打包
// webpack2的命令
node_modules/.bin/webpack app/main.js common/index.js
// webpack4的命令
node_modules/.bin/webpack app/main.js -o common/index.js
若是在vscode终端中运行需要将斜杠/改成反斜杠\
// webpack4的命令
node_modules\.bin\webpack app\main.js -o common\index.js
- app/main.js：是入口文件的路径，本文中就是上述main.js的路径
-
common/index.js：是打包文件的存放路径(打包后生成的文件路径）
打包成功后会多文件index.js
image.png
image.png
image.png
image.png
下面可以通过配置文件 简略打包命令
在当前项目webpackDemo文件夹下新创建一个文件webpack.config.js,写入简单的配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径
// webpack2的配置
module.exports = {
entry: __dirname + "/app/main.js", // 之前提到的唯一入口文件
output: {
path: __dirname + "/common", // 打包后的文件存放的地方
filename: "index.js" // 打包后输出文件的文件名
}
}
// webpack4的配置
module.exports = {
// webpack4需要添加这个配置，development为开发环境，production为生产环境
mode: "development",
entry: __dirname + "/app/main.js", // 之前提到的唯一入口文件
output: {
path: __dirname + "/common", // 打包后的文件存放的地方
filename: "index.js" // 打包后输出文件的文件名
}
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
有了这个配置之后，再打包文件，只需在终端里运行webpack(全局情况下)或node_modules/.bin/webpack(非全局安装需使用)命令就可以了，不需要再命令行打入主入口和打包文件的路径了，这条命令会自动引用webpack.config.js文件中的配置选项。
此时只需要执行node_modules/.bin/webpack
下面可以再简略node_modules/.bin/webpack
npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.6"
}
}
注：package.json中的script会按照一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了
npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，我们在命令行中输入npm start，看看输出结果是什么，输出结果
现在只需要使用npm start就可以打包文件了，有没有觉得webpack也不过如此嘛，不过不要太小瞧webpack，要充分发挥其强大的功能我们还需要配置很多。
image.png
网友评论