webpack – 包构建工具从基础配置到打包发布
webpack是当前前端最热门的前端资源模块化管理和打包工具之一。
基于node.js环境，提供前端模块化支持，代码压缩混淆，处理浏览器端JavaScript兼容性，性能优化等。
项目中使用了webpack工具并且正常配置之后，我们就可以轻松使用模块化语法 import/export，less语法, es6转es5等等，让开发变得简单起来。
webpack官方文档：概念 | webpack 中文文档
⚠️ 要安装webpack之前，必须保证电脑中已经安装了node.js。 Node.js可以使用npm安装各种插件。
目录
2.安装完成后在cmd命令中输入 node -v, 可以看到node版本号即表示安装成功。
3. npm init -y 生成package.json配置文件
4. 项目中安装webpack（如果是webpack 4.0及以上版本，在安装webpack的同时还需要安装webpack-cli）
5.在项目根目录下创建webpack.config.js配置文件，并初始化基本配置
6.在package.json的scripts节点下，新增dev脚本,在终端中执行 npm run dev命令时，就会启动webpack进行项目的打包构建.
2. webpack.config.js中配置devServer(自动在浏览器中打开服务地址和指定端口号)
五. 定位error代码位置（source map）及配置全局路径（@）
一. 基本配置
1.nodeJs官网 按电脑配置直接下载即可；
2.安装完成后在cmd命令中输入 node -v, 可以看到node版本号即表示安装成功。
3. npm init -y 生成package.json配置文件
4. 项目中安装webpack（如果是webpack 4.0及以上版本，在安装webpack的同时还需要安装webpack-cli）
npm install webpack webpack-cli -D
5.在项目根目录下创建webpack.config.js配置文件，并初始化基本配置
module.exports = {
mode:'development' // development是开发环境， production是生产环境
}6.在package.json的scripts节点下，新增dev脚本,在终端中执行 npm run dev命令时，就会启动webpack进行项目的打包构建.
"scripts": {
"dev": "webpack"
},PS： 此时我们可以在js中使用import语法，如src目录下当前有index.js和math.js, math.js中暴露出了add方法：
export function add(a,b){ return a+b}
index.js中可以这样引入了：
import { add } from './math.js'
console.log(add(2,3))
执行 npm run dev命令（webpack就会将一些语法import和export浏览器不太兼容的语法转为可识别的）：
- 默认webpack会将src目录下面的文件进行压缩。会生成一个dist文件，里面有一个main.js. （此时index.html中直接引入 dist/main.js就能正常看到想要的效果了）
- 指定打包入口，出口 (webpack.config.js里配置)
const path = require('path') // 指定项目路径
module.exports = {
mode:'development',
// 指定要处理那个文件
entry: path.join(__dirname,'./src/index.js'),
// 指定要放到的目录和生成的文件名
output:{
path:path.join(__dirname,'dist'),
filename:'js/main.js'
},
}二. 热部署等常见插件
1. 安装webpack热部署插件，自动打包和构建
(上面1-6步操作为基本操作，我们会发现每次更新了js都要重新运行 npm run dev发布，非常的不方便，热部署就很有必要了。)
- 安装 webpack-dev-server （类似于node.js阶段用到的nodemon工具，源代码有更新，自动打包和构建）
- 安装： npm install [email protected] -D. ( 注意： 高版本的可能会报错)
- 配置package.json 文件中的scripts: "dev": "webpack serve"
- 执行命令： npm run dev
"dev":"webpack serve"
⚠️ webpack server此时生成的js存放在了内存中而非磁盘中，所以在系统文件中看不到。 html引用要直接引用，如：‘/js/bundle.js’
- 安装 html-webpack-plugin
（假设index.html在src下面，则服务启动之后还要进入src才能看到界面，所以需要html-webpack-plugin来复制一份到根目录）
- 安装： npm install [email protected] -D
- 在webpack.config.js里配置
const path = require('path') // 指定项目路径
const HtmlPlugin = require('html-webpack-plugin') // 导入html
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', //指定源文件的存放路径
filename: './index.html' // 指定生成的文件存放路径
})
module.exports = {
mode: 'development',
// 指定要处理那个文件
entry: path.join(__dirname, './src/index.js'),
// 指定要放到的目录和生成的文件名
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/main.js'
},
plugins:[htmlPlugin]
} 3. npm run dev
⚠️ 此时启动服务之后直接就能看到index.html, 在目录文件中看不到，因为是在内存里, html里的js也不需要手动引入，该服务会在内存中的index.html里自动引入同目录的js
2. webpack.config.js中配置devServer(自动在浏览器中打开服务地址和指定端口号)
devServer:{
open:true,
port:3000,
host:'127.0.0.1'
}三. loader加载器
在实际开发中，webpack只能打包处理.js格式的文件。如果非.js后缀的文件，就要看是否配置里对应的loader (如： import './index.css' ，不配置css loader则js中无法引入)
(在webpack.config.js中配置)
配置方法：
需要在webpack.config.js的module.exports中配置，增加module对象（所有第三方文件模块的匹配规则都放在这里），然后把规则放到rules数组中，如css loader：
module:{
// 所有第三方文件模块的匹配规则
rules:[
{test:/.css$/,use:['style-loader','css-loader']},
],
}常见的配置：
1. css loader
安装：npm i style-loader css-loader -D
配置：{test:/.css$/,use:['style-loader','css-loader']}
2. less loader
安装：npm i less-loader less -D
配置：{test:/.less$/,use:['style-loader','css-loader','less-loader']}
3. 图片 loader
安装：npm i url-loader file-loader -D
配置：{test:/.jpg|png|gif$/,use:'url-loader?limit=22229&outputPath=images''}
PS: limit指定转成base64位的最低限制byte, 如果图片小于这个byte则会被转为base64位。 outputPath=images 指定打包后图片的位置
4. 处理高级js语法 loader
安装：npm i [email protected] @babel/[email protected] @babel/[email protected] -D
配置：{test:/.js$/,use:'babel-loader',exclude:/node_modules/},
在根目录创建babel.config.js并配置
module.exports = {
// 声明babel可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}
四. 打包发布
1. build打包发布
- 在package.json的scripts里进行配置 ："build":"webpack --mode production"
- 执行打包命令： npm run build
2.打包发布时自动清除目录中的旧文件
安装： npm i clean-webpack-plugin -D
在webpack.config.js中配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins:[new CleanWebpackPlugin()], 五. 定位error代码位置（source map）及配置全局路径（@）
1. 定位error代码位置 - source map
source map 是一个信息文件，里面存储着位置信息，有了它，就可以定位到错误js的具体位置，而不是打包后的，方便开发过程中的调试。
在js中故意打印一个没有定义的变量， 浏览器中默认打印出报错的行数是打包后所在js的位置，不方便定位错误代码：
不做source map时，如下图定位不到正确位置
配置source map后，准确定位：
在webpack.config.js里配置：devtool:'eval-source-map'
⚠️ 发布的时候建议把该配置去掉或者使用下面的配置，只暴露错误的行数在哪里，无法看到js，安全性高： devtool:'nosources-source-map'
2. 配置@指定文件目录标识
在webpack.config.js中配置, 例如：下面@代表src源代码目录
resolve :{
alias:{
'@':path.join(__dirname,'./src/')
}
}在js中引用：
// import * as math from './js/math.js'
import * as math from '@/math.js'webpack中的这些配置，不需要死记硬背。 实际开发过程中，能做到看得懂可以修改配置就可以了。
今天的分享就到这里了，给自己的学习做个笔记，更希望对你有帮助～