概念
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle, webpack是高度可配置的， 基于四个核心概念
- 入口 (entry)
- 输出 (output)
- laoder
- 插件 (plugins)
为了方便去理解，我们先去新建一个项目， 一步步的开始上手webpack
- 新建一个空项目
- 当前项目下打开 git bash
- 执行如下命令，初始化一下项目
yarn init -y
yarn add webpack webpack-cli --dev // 引入webpack以及webpack-cli， 因为webpack生产环境是不需要用的，所以--dev
项目初始化之后就可以开始写点代码了
首先建立一个index.html，/src/index.js, /src/data.js， /src/style.css，在index.html中引入index.js
data.js是用来存储数据的
export function getMockData(){
const mockData = ['jack','rose','xiaoMing']
return mockData
}
index.js用于处理数据，我们就用data.js里的数据来生成一个列表
import { getMockData } from "./data"
import './style.css'
const mockData = getMockData()
const ulNode = document.createElement('ul')
mockData.forEach(item=>{
const liNode = document.createElement('li')
liNode.innerText = item
ulNode.appendChild(liNode)
})
document.body.appendChild(ulNode)
style.css 随便写点样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
width: 600px;
height: 400px;
box-shadow: 0 0 5px 0 #ccc;
margin: 50px auto 0;
border-radius: 10px;
}
li{
font-size: 16px;
color: #666;
padding: 12px 16px;
list-style: none;
}
在index.js中我们可以看到， css样式是通过 import 引入的，在打包的时候就会报错，webpack 在处理一些其他格式的文件时，需要借助loader来打包，这里处理css的时候我们需要安装一些loader，执行如下执行安装
yarn add css-loader style-loader --dev
基本准备好了之后就可以开始配置webpack了
我们在根目录下新建一个 webpack.config.js , webpack 使用的是nodejs的语法，所以会nodejs的话会比较好理解
const path = require('path') // 引入path
module.exports = {
mode: 'development', // mode， 默认是development， 即开发环境， 可针对这个字段打包不同的环境变量
entry: './src/index.js', // 入口，一般是根文件，在cli里面一般是main.js
output: { // 输出，一般配置打包出的文件
filename: 'dist.js',
path: path.resolve(__dirname, 'dist')
},
// loader配置， 下面是配置的cssloader
module: {
//laoder 规则配置
rules: [
{
test: /\.css$/i, // 接受一个正则，用于匹配文件
use: ['style-loader', 'css-loader'] // 这是我们安装的 loader，
}
]
}
}
看到这里相信对 入口，输出， loader， 基本作用都理解了，接下来我们执行打包
npx webpack
此时我们可以看到项目下生成了dist打包文件， 我们去index.html 去引入dist下面的dist.js，打开看看页面，此时就能看到打包的效果了，但是我们打包直接修改index.html中的文件引入这样很不方便，此时我们可以借助一个插件来解决一下这问题，首先安装一下
yarn add html-webpack-plugin --dev
安装好了之后我们去webpack.config.js引入配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'dist.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [new HtmlWebpackPlugin()], // 调用，new一个实例即可
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.jpg$/i,
type: "asset/resourse"
}
]
}
}
那么插件也引入调用了， 接下来我们去直接一下 npx webpack 此时， 打包目录下就多了个index.html 文件了。那么也就是我们插件使用成功了
此时，你已经简单的上手webpack了，更多配置可以点此查阅官网 webpack
