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:UsersLenovoDesktopwebpackDemo'

原因并解决：输入命令 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