本文详细介绍了Webpack作为前端构建工具的基础概念，包括其打包过程、依赖环境，以及如何通过配置文件组织项目并处理模块化。从创建Webpack项目到配置文件编写，一步步引导读者理解并实践Webpack在现代前端开发中的核心作用。
一、Webpack是什么？
前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。
一般需要构建工具处理的几种情况：
-
代码压缩
将JS、CSS代码混淆压缩，让代码体积更小，加载更快 -
编译语法
编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。 -
处理模块化：
CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。
二、webpack是如何打包？
事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；
从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；
然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；
三、 Webpack的依赖
Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境
你需要先安装Node.js，可以去Node.js官网下载，安装完成后，运行命令来查看是否安装成功：
node -v
需要注意的是webpack4官方不再支持node4以下的版本，依赖的node环境版本>=6.11.5，当然考虑到最佳的ES6特性实现，建议node版本可以升级到V8.9.4或以上版本，具体更新说明部分可以见：webpack4更新日志
四、Webpack项目构建
1.初始化项目
创建项目目录，在项目目录下执行npm init 生成package.json文件
npm init
按提示输入项目的名称、版本、描述、作者等信息，如果你不准备在npm中发布你的模块，这些答案都不重要，一路回车默认也可。之后就会在该目录下出现一个package.json文件，打开可以看到刚才输入的信息：
package name: 你的项目名字叫啥
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址
keywirds： 项目关键字
author: 作者的名字
license: 发行项目需要的证书
或直接执行npm init -y 默认回车
2. webpack安装
执行webpack命令，会执行node_modules下的.bin目录下的webpack；
webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
所以在安装webpack时，我们需要同时安装webpack-cli
安装
npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli --save-dev # 局部安装
Wepack的全局安装和局部安装
一般在我们的项目中都会选择局部安装webpack，因为如果使用全局的，合作同一个项目的同事电脑上全局安装的webpack的版本可能存在差异，比如我安装的版本是5，同事安装的版本是4，还有可能是3的，这样使用全局webpack打包的时候就会出问题
3. 项目目录
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <script src="./src/index.js" type="module"></script> -->
<script src="./dist/main.js"></script>
</body>
</html>
index.js
import { sum, mul } from './js/math.js';
const { dateFormat, priceFormat } = require('./js/format');
console.log(sum(20, 30));
console.log(mul(20, 30));
console.log(dateFormat("1213"));
console.log(priceFormat("1213"));
format.js (commonjs写法)
const dateFormat = (date) => {
return "2020-12-12";
}
const priceFormat = (price) => {
return "100.00";
}
module.exports = {
dateFormat,
priceFormat
}
math.js (ES6module写法)
export const sum = (num1, num2) => {
return num1 + num2;
}
export const mul = (num1, num2) => {
return num1 * num2;
}
4.webpack配置文件
- 通常情况下，webpack需要打包的项目非常复杂，并且我们需要一系列的配置来满足需求，默认配置必然是不可以的
- 我们可以在根目录下创建一个 webpack.config.js 文件来作为webpack的配置文件
webpack.config.js基础配置
- entry： 指webpack以那个文件为入口起点开始打包
- output： 指webpack打包后的资源输出到哪里去，以及如何命名
- mode： 指示webpack使用相应模式的配置， development 开发模式；production 生产模式
const path = require(path) // 得到的path为webpack.config.js所在的目录
module.exports = {
mode: 'development', // development 开发模式 production 生产模式
entry: './src/index.js', // 指定入口文件
output: {
filename: "main.js", // 指定出口文件名称
path: path.resolve(__dirname,'./dist') // 指定出口文件路径目录,必须是一个绝对路径
},
// loader配置
module: {
rules: []
},
// 配置plugins
plugins: []
}
继续执行webpack命令，依然可以正常打包
5. 指定配置文件
但是如果我们的配置文件并不是webpack.config.js的名字,而是其他的名字呢？
- 比如我们将 webpack.config.js 修改成 yx.config.js
- 这个时候我们可以通过 --config 来指定对应的配置文件
webapack --config yx.config.js
但每次这样执行命令进行编译会非常繁琐，所以我们可以在package.json 中增加一个新的脚本
"scripts": {
"build": "webpack --config yx.config.js"
}
之后我们执行npm run build来打包即可
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
