Webpack入门
一、什么是WebPack，为什么要使用它？
模块打包机：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less,Scss,TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以使复杂的程序细化成为各个小的文件,为了简化开发的复杂度
二、weback使用流程
1、创建项目
mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
echo test>app.js // 创建app.js文件
echo test>main.js // 创建main.js文件
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
echo test>index.html // 创建index.html文件
- app：用来存放原始数据和JavaScript模块
- common：用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）
基础代码
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规范导出这个模块
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());
2. 安装配置
安装webpack需要使用npm,因此首先要安装node,此处不再赘述,可自行安装 node安装地址
- 声明一下我使用的环境
- npm -v : v6.14.4
- node -v : v12.16.3
1.调用 npm init 来初始化 package.json，参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值。
npm init -y
2.安装 webpack 默认最新版,若不想安装最新版,输入webpack@版本号即可，webpack有两个版本：webpack2和webpack4，两个版本安装配置有差异。
// webpack2
npm install webpack@3.5 --save-dev // 项目内安装 (-g 全局安装)
// webpack4 需要去额外安装webpack-cli
npm install webpack webpack-cli --save-dev // 项目内安装 (-g 全局安装)
3.Webpack打包 — 本人操作时使用全局安装，望注意~
// webpack2
webpack app/main.js common/index.js // (webpack全局情况下)
node_modules/.bin/webpack app/main.js common/index.js // (webpack非全局安装需使用)
// webpack4
webpack app/main.js -o common/index.js // (webpack全局情况下)
node_modules/.bin/webpack app/main.js -o common/index.js // (webpack非全局安装需使用)
- app/main.js：是入口文件路径
- common/index.js：打包文件的存放路径
报错及异常处理
(1)、webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括所在位置 行:1 字符: 1
原因并解决：导致这个问题的原因，我目前还不是很清楚，有了解的童鞋，可以留言相互探讨一下，目前我使用的办法是找到项目根目录下的package.json文件，添加一个命令
- npm run dev
"scripts": {
"dev": "webpack app/main.js -o common/index.js ",
},
(2)、Insufficient number of arguments or no entry found. Alternatively, run 'webpack(-cli) --help' for usage info.
原因并解决： webpack4 需要去额外安装webpack-cli，未安装是会提示该报错
npm install webpack-cli --save-dev
(3)、ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Lenovo\Desktop\webpackDemo'
原因并解决：输入命令 npm run dev1 时，会默认去查找项目根目录下的src/index.js，试图将其打包，输出路径为dist/main.js的文件，手动创建src/index.js，再次输入命令 npm run dev1，会生成dist/main.js文件，并将main.js引入common/index.html即可
(4)、WARNING in configuration
原因并解决：webpack4是需要指定打包为开发环境(development)还是生产环境的(production)，未指定会有这个警告
- npm run dev
- npm run build
// development: 不对打包后的文件进行压缩,有换行，有缩进，可阅读性好
// production: 打包后的文件自动压缩
"scripts": {
"dev": "webpack app/main.js -o common/index.js --mode development",
"build": "webpack app/main.js -o common/index.js --mode production"
},
三、打包成功
那么此时，可以打开浏览器，访问common/index.html
