概述
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
前置配置
mkdir webpack-demo
cd webpack-demo
npm init -y // create package.json
npm i --save-dev webpack webpack-cli // install webpack and webpack-cli to devDependencies
copy nul webpack-config.js // create webpack-config.js file
mkdir src // create js source folder
mkdir img // create image source folder
mkdir css // create css source folder
常用配置
入口文件
project
│ index.html
│ package-lock.json
│ package.json
│ webpack.config.js
├─css
├─img
└─src
index.js
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1"
}
}
webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
index.js
console.log('hello kitty.')
document.write('hello kitty.')
在cmd中执行 webpack命令，发现目录结构下会生成 dist目录和bundle.js文件。然后打开index.html，可以看到界面和控制台可以正常显示 hello kitty.。
至此，webpack的第一步配置已经完成。
CSS样式资源
为了在javaScript文件中importcss样式文件，需要安装引入style-loader和css-loader。
npm i --save-dev style-loader css-loader
在webpack.config.js文件中配置css的引入规则，定义查找的文件后缀和需要使用到的plugin。
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader','css-loader'],
}
]
}
在css目录下定义样式文件 style.css
body {
background: greenyellow;
}
在 index.js文件中引入 style.css样式
import '../css/style.css'
执行webpack命令，观察index.html界面的背景颜色是否发生变化。
图片资源
图片资源的引入与样式引入类似，但是webpack中内置了 Asset Modules，不需要再引入三方的plugin。
在webpack.config.js文件中配置图片资源的引入规则
module: {
rules: [
{
... css config
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
]
}
在img目录下引入一张图片icon.png
.......
└─img
icon.png
在 index.js文件中创建一个图片控件并显示。
import Img from '../img/icon.png'
const myImg = new Image();
myImg.src = Img;
document.body.appendChild(myImg)
执行webpack命令，观察index.html界面是否有显示这张图片。
其它资源的引入和使用同 上面的
css样式和图片资源，如静态数据、字体等等。
使用 source map
当webpack打包源码时，可能会很难追踪到error和warning在源代码中的原始位置。为了更容易的追踪error和warning， javaScript提供了source maps功能，可以将编译后的代码映射回原始的源代码中。
webpack.config.js的具体配置
module.exports = {
.......
devtools: 'inline-source-map',
}
具体错误信息可以在Console控制台中查看。
HtmlWebpackPlugin
到目前为止，我们都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始 在文件名中使用 hash 并输出 多个 bundle，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。
安装html-webpack-plugin插件
npm i --save-dev html-webpack-plugin
调整webpack.config.js文件中的相关配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
......
plugins:[
new HtmlWebpackPlugin({
title: 'New Page',
})
],
}
执行webpack命令，查看效果。
webpack-dev-server
当前的配置，在编写完代码后都需要手动执行webpack命令进行编译，然后手动刷新浏览器查看效果。
webpack-dev-server 可以做到自动编译代码、自动刷新浏览器的效果。
安装webpack-dev-server插件
npm i --save-dev webpack-dev-server
修改webpack.config.js配置文件 ，告诉devServer，该从什么位置查找文件
module.exports = {
.......
devServer:{
static: './dist',
hot: true, //自动更新
},
}
在package.json脚本上添加直接运行 dev server的script
"scripts": {
"build-dev": "webpack serve --open"
},
运行命令并自动打开浏览器页面
npm run build-dev
其它
待补充。。。。。。
