(一) 为什么要使用webpack

1、什么是Webpack WebPack是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

2.为什么要使用WebPack，WebPack和Grunt以及Gulp相比有什么特性

首先，Grunt和Gulp只能将一些CSS和JS文件分别压缩合并成单个文件，当然也具有一些编译功能，比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能，同时还具备模块化开发和组件式开发等优点，在目前流行的前端框架React和Vue中也得到很好的支持

(二) 模块引入方式

下面的模块引入引出方式webpack都 可以识别。 https://www.webpackjs.com/api/module-methods/#es6-推荐-

[1]. ES6 Module模块引入方式

//导出模块 //写法1 const add = function(a,b) {return a+b} export { add } //写法2 export { add: function (a,b) {return a+b} } //默认导出 export default function(a,b) {return a+b} //混合写法 export const add = function(a,b) {return a+b} //导入模块 //命名式 需要有大括号 import { add } from './add.js' // 默认导入 等同于 import { default as myAdd } from './add.js' import myAdd from './add.js' //混合导入 import add, {name} from './add.js' //全部导入 import * as add from './add.js'

[2]. CommonJS模块引入方式

nodejs平台默认采用的就是commonjs。

//导出模块 module.exports = { name: 'jack', add: function(a, b){return a+b} } // 导入模块 const sum = require('./add.js') console.log(sum(2,3)) // 5

(三) 安装webpack

[1]. 安装node.js

安装完成后在控制台中使用下面代码，如果显示出来版本号，说明安装成功

node -v

[2]. 初始化配置

在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。

在控制台中，进入到项目根目录下中执行

# 也可以使用npm init -y npm init

[3]. 安装webpack

全局安装(不推荐)：在控制台中输入 不推荐的原因：当有两个项目使用不同版本的webpack时就会出现因为版本不同造成程序出错npm install webpack webpack-cli -g 局部安装(在项目中安装)：在控制台中进入到项目的根目录，执行如下代码# install 可以用i替换 --save-dev可以用 -D替换 可以使用@指定版本 # npm i webpack@4.1.5 webpack-cli -D 指定版本号 npm install webpack webpack-cli --save-dev

[4]. 卸载webpack

npm uninstall webpack webpack-cli -g

[5]. 查看webpack版本号

查看全局的webpack版本号

npm webpack -v

查看项目下安装的webpack版本号

npx webpack -v

[6]. npx 和 npm的区别

npm是一个node package安装工具。 npx的作用是先检查本地有没有安装某个package，如果没有去远程registry找，找到的话直接使用，不用下载到本地node-modules包里面，这样就能优化本地项目的大小，也可以避免安装package到全局。

(四) webpack五个核心概念

[1]. 入口 Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包， 分析构建内部依赖图。

[2]. 输出 Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去， 以及如何命名。

[3]. Loader

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)

[4]. Plugins

插件(Plugins)可以用于执行范围更广的任务。 插件的范围包括， 从打包优化和压缩， 一直到重新定义环境中的变量等。

[5]. Mode

模式(Mode)指示 webpack 使用相应模式的配置。

选项描述特点development会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用NamedChunksPlugin 和NamedModulesPlugin。能让代码本地调试运行的环境production会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。 启用 FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 TerserPlugin。能让代码优化上线运行的环境

(五) 简单小案例

初始化npm

npm init -y

本地安装webpack

npm i webpack webpack-cli -D

在项目根目录下创建src文件夹和build文件夹，其中src是存放源码的文件夹，build是存放打包后代码的文件夹。

在src文件中新建index.js文件，作为webpack的入口文件

index.js文件中的内容为

function add(x, y) { return x + y; } console.log(add(5, 5));

执行指令(目前算开发环境) 开发环境：webpack会以 ./src/index.js为入口文件开始打包，打包后输出到./build/built.js文件中

webpack ./src/index.js -o ./build/built.js --mode=development

生产环境：

webpack ./src/index.js -o ./build/built.js --mode=production

可以在build文件夹中得到built.js文件

可以使用如下命令得到运行的结果(前提是安装了node)

node ./build/built.js

[1]. 结论

webpack能处理js/json资源，不能处理css/img等其他资源。生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化。生产环境比开发环境多一个压缩js代码。

(六) webpack配置文件

https://blog.csdn.net/kouzuhuai2956/article/details/106119674 webpack有自己默认的配置文件，当不想使用默认的配置文件时，可以使用如下方法改变配置项。

[1]. 使用默认的配置文件名进行打包

需要在项目的根目录下新建一个webpack.config.js文件来配置自己的webpack，覆盖掉默认的webpack 的配置文件。

webpack.config.js文件

const path = require('path'); //commonJS导出文件 module.exports = { //打包的模式：production(生产模式，默认)，development(开发模式) mode: 'production', //项目入口(从哪个文件开始打包) entry: './src/index.js', //打包好的文件的相关配置 output: { //打包出的文件名 filename: 'built.js', //打包出的文件放置的位置(绝对路径) path: path.resolve(__dirname, 'build'), }, //loader的配置 module:{ rules:[ //详细loader配置 ] }, //plugins的配置 plugins:[ //详细plugins配置 ] }

使用如下命令进行打包

npx webpack

[2]. 使用自定义的配置文件名来打包文件

webpackconfig.js文件中配置好webpack配置文件后，使用如下命令进行打包。

npx webpack --config webpackconfig.js