webpack的基本使用
webpack的安装
在项目的终端下面运行npm i webpack webpack-cli -D
在项目中配置webpack
在项目根录中，创建名为webpack.config.js 的webpack配置文件，并初始化如下的基本配置
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development'
}
在package.json的script节点下，新增dev脚本如下：
"scripts": {
"dev":"webpack"
},
mode 节点 的可选值有两个，分别是：
① development
开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包 速度快 ，适合在 开发阶段使用
② production
生产环境
会对打包生成的文件进行代码压缩和性能优化
打包 速度很慢 ，仅适合在项目 发布阶段 发布阶段 使用
webpack中的默认约定
- 默认的打包入口文件src ->index.js
- 默认的输出文件路径dist->main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
自定义打包的入口和出口
在 webpack.config.js配置文件中，通过entry节点指定打包的入口 。通过output 节点指定打包的出口 。
const path = require('path')//导入node.js中专门操作路径的模块
//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development',
entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
filename:'bundle.js'//输出文件的名称
}
}
webpack的插件
。最常用的 webpack 插件有如下两个：
① webpack-dev-server
类似于 node.js阶段用到的nodemon 工具
每当修改了源代码， webpack 会自动进行项目的打包和构建
② html-webpack-plugin
webpack中的 HTML 插件（类似于一个模板引擎）
可以通过此插件自定制 index.html页面的内容
webpack-dev-server 可以让 webpack 监听项目源代码的变化 ，从而进行自动打包构建 。
安装 webpack-dev-server
运行如下的命令，即可在项目中安装此插件：
npm i webpack-dev-server -D
配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：
"scripts": {
"dev": "webpack serve"
},
② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
生成的bundle.js是虚拟的，输出在了项目的根目录中，webpack output is served from /
可以通过 http://localhost:8080/bundle.js 显示出来
需要在项目中修改bundle.js的引用
// 加载和引用内存中的bundle.js
<script src="/bundle.js"></script>
安装 html-webpack-plugin
运行如下的命令，即可在项目中安装此插件：
npm i html-webpack-plugin -D
我们打包完后的http://localhost:8080 地址没有index.html页面，是一个根目录
html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。
需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！
配置 html-webpack-plugin
//导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', //指定源文件的存放地址
filename:'./index.html', //指定生成文件的存放路径
})
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development',
plugins:[htmlPlugin], //通过plugins节点，使htmlPlugin插件生效
}
解惑 html-webpack-plugin
① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
② HTML 插件在生成的 index.html 页面的底部，自动注入了打包的 bundle.js 文件
目的：我们访问http://localhost:8080的根目录就有了index.html，就可以直接显示出来
devServer节点
在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：
devServer:{
open:true,//初次打包完成后，自动打开浏览器
host:'127.0.0.1', //初次打包所使用的主机地址
port:80,//实时打包所使用的端口号
}
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！
webpack 中的 loader
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：
⚫ css-loader 可以打包处理 .css 相关的文件
⚫ less-loader 可以打包处理 .less 相关的文件
⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
打包处理 css 文件
① 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
rules:[//文件后缀名的匹配规则
{
test:/\.css$/,use:['style-loader','css-loader']}
]
其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
⚫ use 数组中指定的 loader 顺序是固定的
⚫ 多个 loader 的调用顺序是：从后往前调用
打包处理 less 文件
① 运行 npm i less-loader less -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
rules:[//文件后缀名的匹配规则
//loader调用顺序是从后往前
{
test:/\.less$/,use:['style-loader','css-loader','less-loader']},
]
打包处理样式表中与 url 路径相关的文件
① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
第一种写法
rules:[//文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'},
]
第二种写法
rules:[//文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/, //匹配图片文件
use:{
loader:'url-loader',//通过loader属性指定要调用的loader
options:{
//同options属性指定参数项
limit:22229
}
}
}
]
其中 ? 之后的是 loader 的参数项： ⚫ limit 用来指定图片的大小，单位是字节（byte） ⚫ 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片
打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。
安装 babel-loader 相关的包
运行如下的命令安装对应的依赖包：
npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D
配置 babel-loader
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
{
test:/\.js$/,
//exclude为排除项
// 表示babel-loader只需要处理开发者编写的js文件，不需要处理node_modules下的js文件
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
//参数项
//声明一个babel插件，此插件用来转化class中的高级语法
plugins:['@babel/plugin-proposal-class-properties'],
}
}
}
打包发布
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 命令如下：
"scripts": {
"dev": "webpack serve", //开发环境中，运行dev命令
"build":"webpack --mode production" //项目发布时，运行build命令
},
–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
把 JavaScript 文件统一生成到 js 目录中
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
//明确告诉webpack把生成的bundle.js文件存放到dist目录下的js目录中
filename:'js/bundle.js'
},
把图片文件统一生成到 image 目录中
{
test:/\.jpg|png|gif$/,
use:{
loader:'url-loader',//通过loader属性指定要调用的loader
options:{
//同options属性指定参数项
limit:22228,
outputPath:'image',
}
}
},
自动清理 dist 目录下的旧文件
为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：
现在项目终端中运行如下命令
npm i clean-webpack-plugin -D
配置clean-webpack-plugi
//按需导入插件，得到插件的构造函数之后，创建插件的实例对象
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
plugins:[htmlPlugin,cleanPlugin], //通过plugins节点，挂载插件
Source Map
webpack 开发环境下的 Source Map
在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码。
默认 Source Map 的问题
开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。
解决默认 Source Map 的问题
开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数
保持一致：
eval-source-map仅限在开发模式下使用，不建议在生产模式下使用
module.exports={
mode:'development',
devtool:'eval-source-map',
}
webpack 生产环境下的 Source Map
在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通 过 Source Map 的形式暴露给别有所图之人。
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为nosources-source-map。
在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为source-map。采用此选项后：你应该将你的服务器配置为，不允许普通用户访问 source map 文件！
Source Map 的最佳实践
① 开发环境下：
⚫ 建议把 devtool 的值设置为 eval-source-map
⚫ 好处：可以精准定位到具体的错误行
② 生产环境下：
⚫ 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
⚫ 好处：防止源码泄露，提高网站的安全性