目录
一、webpack是什么？
二、webpack的基本使用
1、初始化项目
2、安装webpack及其依赖
3、使用
3.1 配置webpack：
3.2 在package.js文件中添加打包命令
3.3 执行打包命令
三、webpack相关插件
插件一：HtmlWebpackPlugin
插件二：BundleAnalyzerPlugin
插件三：splitChunks
四、非js文件模块化打包
一、webpack是什么？
webpack是一个模块化打包工具。我们在开发的时候通常都是使用模块化的方式进行开发，但是浏览器对模块化的支持程度很低，因此我们需要借助webpack打包工具将模块化代码打包生成浏览器支持的规范。简单来说，webpack就是用来将项目模块化文件打包生成普通脚本文件，然后再引入到html文件中。
二、webpack的基本使用
1、初始化项目
执行下面的命令可以在项目文件夹下生成默认的package.json文件
npm init -y2、安装webpack及其依赖
cnpm i webpack webpack-cli --save-dev3、使用
我们在项目文件夹下新建一个src文件夹，然后在src下新建三个js文件，分别为a.js、b.js、main.js，其中main.js作为入口文件。
我们在a.js中使用qs工具库，在b.js中使用lodash工具库，需要先安装qs和lodash：
cnpm i qs lodash -Sa.js
import qs from 'qs'let obj = {name: 'zhangsan',age: 12
}export default {url: "/user/login",data: qs.stringify(obj)
}b.js
import _ from 'lodash'let obj = {name: "lisi",age: 15
}export default _.cloneDeep(obj)在main.js中导入a.js和b.js并使用：
import a from './a'
import b from './b'let dom = document.createElement('div')
dom.innerText = JSON.stringify(a)
document.body.appendChild(dom)let dom2 = document.createElement('div')
dom2.innerText = JSON.stringify(b)
document.body.appendChild(dom2)如果我们此时直接将这三个js文件引入我们的html文件中是无法使用的，因为浏览器并不支持ES6模块化(import、export)，所以我们需要使用webpack将这三个js文件打包生成普通脚本文件再引入html文件中使用：
3.1 配置webpack：
在我们的项目文件夹下新建一个webpack.config.js文件
webpack.config.js
// 导入path模块，用于处理文件和目录的路径
const path = require('path')
module.exports = {//提供 mode 配置选项，告知 webpack 使用development(开发)模式的内置优化mode: 'development',// 入口文件 (注意:入口使用相对路径)entry: './src/main.js',// 打包完成后输出到哪个文件 output: {// 输出文件的路径// __dirname表示当前文件模块所属的绝对路径// path.resolve() 用来拼接路径path: path.resolve(__dirname, 'dist'),// 输出文件的文件名filename: 'bundle.js',// 每次打包都重新生成clean: true}
}3.2 在package.js文件中添加打包命令
"build": "webpack --config webpack.config.js"
3.3 执行打包命令
npm run build打包完成后，会生成一个dist文件夹，文件夹下有一个bundle.js文件：
此时我们在dist文件夹下新建一个index.html文件，并将bundle.js文件引入，然后运行index.html文件就可以了：
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./bundle.js"></script>
</body>
</html>三、webpack相关插件
插件一：HtmlWebpackPlugin
由于我们在出口 (output) 中设置了 clear:true ，因此每次我们改动了代码重新打包项目的时候，都会把dist文件夹清理掉重新生成一个新的打包文件，我们的html文件也会被清理掉，因此每次打包都需要我们重新建一个html文件，而使用HtmlWebpackPlugin插件就不再需要我们每次在打包后重新建一个html文件，因为这个插件会帮我们自动生成一个html文件。
安装插件HtmlWebpackPlugin
cnpm install --save-dev html-webpack-plugin使用插件
webpack.config.js
const path = require('path')
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',clean: true},// 使用插件plugins:[new HtmlWebpackPlugin()],
}插件二：BundleAnalyzerPlugin
这是一个可视化图形插件，用来分析模块化大小，它通常用来做前端性能优化，比如通过可视化，我们可以知道打包完后哪个文件比较大，我们就可以将大文件分成小模块，同时还可以删除误引入的第三方依赖。
安装插件BundleAnalyzerPlugin
cnpm i --save-dev webpack-bundle-analyzer使用插件
webpack.config.js
const path = require('path')
// 导入插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',clean: true},// 使用插件plugins:[new HtmlWebpackPlugin(),new BundleAnalyzerPlugin()],}
插件三：splitChunks
这个插件用来抽离公共重复的依赖，将其单独放在一个脚本文件，以优化前端性能。
这个插件是webpack自带的，不需要安装。
使用插件：
webpack.config.js
const path = require('path')
module.exports = {// 可以设置多个入口文件 entry:{home:'./src/home.js',main:'./src/main.js'},output:{path:path.resolve(__dirname,'dist'),// [name]是原先文件的名字filename:'bundle_[name].js',clean:true},// 使用插件optimization:{splitChunks: {chunks: 'all',}}
}
四、非js文件模块化打包
打包css文件
安装转换工具：
cnpm i css-loader style-loader --save-dev使用：
webpack.config.js
const path = require('path')
module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',clean: true},// 可以设置非js文件的转换规则module:{rules:[// 设置css文件转换规则{// 正则表达式匹配以.css结尾的文件test:/\.css$/,// 转换使用的工具use:['style-loader','css-loader']}]}
}
