webpack是当前前端最热门的前端资源模块化管理和打包工具之一。

基于node.js环境，提供前端模块化支持，代码压缩混淆，处理浏览器端Javascript兼容性，性能优化等。

项目中使用了webpack工具并且正常配置之后，我们就可以轻松使用模块化语法 import/export，less语法, es6转es5等等，让开发变得简单起来。

webpack官方文档：概念 | webpack 中文文档

⚠️   要安装webpack之前，必须保证电脑中已经安装了node.js。 Node.js可以使用npm安装各种插件。

目录

一. 基本配置

1.nodeJs官网 按电脑配置直接下载即可；

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进行项目的打包构建.  

二. 热部署等常见插件

1. 安装webpack热部署插件，自动打包和构建

2. webpack.config.js中配置devServer(自动在浏览器中打开服务地址和指定端口号)

三. loader加载器

四.  打包发布

1. build打包发布

2.打包发布时自动清除目录中的旧文件 

五. 定位error代码位置（source map）及配置全局路径（@）

1. 定位error代码位置 - source map

2.  配置@指定文件目录标识

一. 基本配置

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工具，源代码有更新，自动打包和构建）

1.  安装： npm install webpack-dev-server@3.11.2 -D.    ( 注意： 高版本的可能会报错)
2.  配置package.json 文件中的scripts:     "dev": "webpack serve"
3. 执行命令： npm run dev    

   "dev":"webpack serve"

    ⚠️  webpack server此时生成的js存放在了内存中而非磁盘中，所以在系统文件中看不到。 html引用要直接引用，如：‘/js/bundle.js’

- 安装 html-webpack-plugin

（假设index.html在src下面，则服务启动之后还要进入src才能看到界面，所以需要html-webpack-plugin来复制一份到根目录）

1.  安装： npm install html-webpack-plugin@5.3.2 -D
2.  在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 babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -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中的这些配置，不需要死记硬背。 实际开发过程中，能做到看得懂可以修改配置就可以了。

今天的分享就到这里了，给自己的学习做个笔记，更希望对你有帮助～