目录
一、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']
}
]
}
}