本文详细介绍了webpack的基本使用，包括核心概念如entry、output、loader、plugins和mode，以及npm相关知识。深入讲解了webpack开发环境配置，如打包js、静态资源、devServer、分模块打包和HMR热更新。还涵盖了生产环境配置，如css提取、压缩、eslint配置和性能优化。最后，文章探讨了webpack的性能优化策略，如source-map、code split和resolve配置，为开发者提供了全面的webpack实践指南。
目录
一. 什么是webpack
是一个前端资源构建工具，静态模块打包器
何为资源构建工具？
将一系列操作整合成大的工具处理。
何为静态模块打包器？
会对项目入口js文件中的各个模块,如less，vue等模块的依赖关系引入，形成一个chunk（代码块），再对这个代码块进行处理，比如将less编译成css等，这些操作就是打包，打包后将这些资源输出成bundle。
二. 核心概念
1. entry
即入口，指webpack以哪个文件为入口起点开始打包，分析构建内部依赖关系；
1.写成String格式：打包形成一个chunk,输出一个bundle文件，此时chunk默认名称为main
entry:'./src/js/index.js',2.写成Array格式： 所有入口文件最终会形成一个chunk，输出一个bundle文件，用于HMR让html热更新生效。
entry:['./src/js/index.js','./src/js/test.js'],3.写成Object格式： 用几个入口文件就形成几个chunk，输出一个bundle文件，chunk文件名称为对象的key。
entry:{
index:'./src/js/index.js',
test:'./src/js/test.js'
},4.特殊用法
entry:{
// 所有入口文件最终会形成一个chunk，输出一个bundle文件
index:['./src/js/index.js','./src/js/index1.js'],
// 形成一个chunk,输出一个bundle文件
test:'./src/js/test.js'
},2. output
即出口，webpack打包后的资源bundles输出到哪里去，以及如何命名；
publicPath指定引入公共路径的前缀，比如打包后的js会提供script标签src路径引入html文件，会在此路径前添加该前缀；
chunkFilename指定非入口chunk的名称，非入口chunk指的是非entry指定生成的chunk，一般为import语法分割的chunk或optimization对node_modules的包进行分割的chunk。
打包生成的js文件是以匿名函数定义模块，内部模块无法在外部引用，若要暴露函数内部的模块使用library配置项指定整个库向外暴露的变量名，libraryTarget指定此变量名添加到哪个browser，即使用什么什么模块化yu'f浏览器端指定的是‘window’,nodejs指定的是‘global’或'commonjs‘等
output:{
// 输出文件名
filename:'js/built.[name].[contenthash:10].js',
// 输出路径,__dirname代表当前文件目录绝对路径，build是输出的文件名
path:resolve(__dirname,'build'),
// 所有资源引入公共路径前缀
publicPath:'/',
// 非入口chunk的名称
chunkFilename:'[name]_chunk.js',
library:'[name]',
libraryTarget:'window',
},3. loader
让webpack能够处理哪些非js的文件，因为webpack只能处理js文件；
4. plugins
即插件，可以执行范围更广的任务，包括从打包优化和压缩，一直到重新定义环境中的变量等；
5. mode
指示webpack使用相应模式的配置，包含两种选项development(开发模式),production(生产模式),不同的模式webpack会启用不同的插件。
三. 关于npm
npm，全称是 Node Package Manager，通俗的说就是使用一台服务器集中管理一些第三方的依赖库，比如jQuery、Bootstrap等，方便下载使用。
在www.npmjs.com可以搜索第三方包，开发者发布在这个网站上的，npm命令就是在这个网站上下载第三方包。
npm的第二层含义就是一个命令行工具，只要你安装了node就已经安装了npm，npm也有版本的概念，输入 npm –version查看版本，升级npm npm install - -global npm
安装node环境：
1.前往node官网下载node安装包 下载 | Node.js 中文网
2.选择对应操作系统的.msi安装包，下载到本地后一键点击下一步安装即可，安装完成后在cmd控制台中输入node -v查看当前安装的版本，若能够查看安装版本，则证明node环境安装成功。
3.随后在控制台中输入指令 npm install npm -g 全局安装npm，这样才能在全局环境下使用npm
4. 随后就可以在电脑的任何路径打开控制台使用npm命令了
1. npm项目初始化
建议每一个项目都要有一个package.json文件（包描述问价，相当于产品的说明书），这个文件可以通过 npm init的方式初始化出来，该文件中最有用的是dependencies选项，可以用来保存第三方包的依赖信息。
安装的依赖包会统一安装到项目的node_modules文件下。
建议执行npm install 包名的时候 都加上- - save这个选项，目的是在package.json的dependencies选项下保存生产依赖项信息(开发和部署时候都需要的)。如果node_modules删除了只需要 npm install就会自动把package.json中的dependencies中的所有依赖项下载回来，版本5以后就不用加了会自动添加；devDependencies开发依赖模块(只有开发的时候需要的模块)；scripts配置本地可执行命令
示例1：在script中配置一条npm可执行命令用于将项目中的less文件转换为css
{
"scripts":{
"less":"lessc 1.less 1.min.css -x"
}
}这样就能在当前项目的终端下使用npm run less 进行less文件的转换操作，相当于执行了lessc 1.less 1.min.css -x这条webpack命令。
示例2：在配置可执行脚本命令的时候，基于process的环境变量区分开发环境还是生产环境
"scripts":{
"serve":"set NODE_EVN=dev&&node index1.js",
"build":"set NODE_EVN=pro&&node index1.js"
}上述配置中 set NODE_ENV=dev 代表设置全局环境变量，但在MAC中使用 export NODE_ENV=dev
在index1.js中获取script中设置的环境变量进行判断
let n = process.env.NODE_EVN;
if(n === 'dev') {
console.log('开发环境下执行');
} else {
console.log('生产环境下执行');
}2. 关于package-lock.json
在npm5以前是不会有package-lock.json这个文件的，之后才加入。当安装包的时候npm会自动生成或者更新package-lock.json这个文件，它会保存node_modules中所有包的信息（版本，下载地址），这样重新执行npm install的速度会更快一些； 也可以锁定版本，防止执行npm install时下载新的版本（如果项目依赖1.1.1版本，但重新下载会下载最新版本）
3. 常用命令
- npm init npm init –y:快速生成package.json文件，跳过向导，所有选项默认
- npm install 包名：下载指定的模块
- npm install 包名 --save：把模块保存在清单生产依赖中 (简写npm i –S 包名)
- npm install 包名 --save-dev：把模块保存在清单开发依赖中
- npm install：一次性把dependencies中的所有依赖项下载回来(开发 + 生产环境)
- npm install --production：只安装生产依赖的模块
- npm install 包名 -g(--global)：把模块安装在全局环境中
- npm uninstall 包名：只删除，如果有依赖项会依然保存
- npm uninstall --save：删除的同时也会把依赖项给删除 npm un –S 包名
- npm help：查看npm使用帮助
- npm install 包名@版本号 --save：下载指定版本的包
- npm 命令 --help：查看指定命令的使用帮助
- npm config list：查看npm配置信息
- npm view 包名 versions > 包名.versions.json：查看某个模块的版本信息，输出到指定的模块中
- npm root -g：查看全局安装模块的目录
4. 解决npm被墙
使用cnpm
npm存储包的服务器在国外，有时会被墙，速度很慢，淘宝的开发团队把npm在国内做了一个备份 ---> 中国 NPM 镜像
安装淘宝的cnpm：npm install –global cnpm
接下来安装包的时候把之前的npm替换成cnpm，npm就会通过淘宝的服务器下载（在任意目录下都可以执行，global是安装到全局的意思）
如果不想安装cnpm又想使用淘宝的服务器来下载安装：
npm install jquery –registry=https://registry.npm.taobao.org
可以将这个选现加入配置文件中
npm config set registry https://registry.npm.taobao.org
只要经过上面命令的配置，所有的npm install都会默认从淘宝的服务器下载。
yarn常用指令
可以使用yarn代替npm安装项目依赖，它的安装速度要比npm要快（npm 的两倍至三倍），使用 npm i yarn -g 安装yarn
- yarn init -y：生成package.json文件
- yarn install：一次性把dependencies中的所有依赖项下载回来(跑环境)
- yarn add 包名@x.xx.xx：下载指定的模块
- yarn remove 包名：移除指定的模块
基于nrm切源提高npm速度
首先安装nrm：npm install nrm -g
查看有哪些源：nrm ls
切源：nrm use xxx
一般切源到taobao，即使用指令 nrm use taobao
5. 什么情况下把模块安装在全局？
使用npm install 包名 -g安装在全局下的模块，对任何项目都有作用(可能会导致版本冲突)，只能基于命令的方式管理，不能基于CommonJS中的require导入使用(不能导入到文件中基于代码来处理)。
可以使用指令npm root -g查看全局安装模块的目录，一般安装在本地电脑c盘AppData/Roaming/npm文件夹下，之所以可以对安装在全局下的xxx模块使用对应的命令进行操作，是因为在该文件下存在xxx.cmd的文件；
安装在本地的模块，可以在项目中导入基于代码操作，不能基于命令来操作。但是可以通过package.json中的scripts配置一些npm的可执行命令，配置后通过 npm run xxx 运行。
四. webpack开发环境配置
1. 使用webpack打包js文件
新建文件，使用npm init初始化项目，生成package.json文件，下载webpack执行如下指令：
npm i webpack@4 webpack-cli@3 -g
npm i webpack@4 webpack-cli@3 -D 创建文件加src，作为项目打包的入口文件，其下创建index.js作为入口js；创建文件build，作为项目的打包的出口文件。
在index.js输入简单js代码：
function add(a,b) {
return a + b;
}
console.log(add(100,200));随后执行命令：含义
最低0.47元/天 解锁文章
扫一扫
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
