概念
本质上，webpack是一个用于现代JS应用程序的静态模块打包工具。当webapck处理应用程序时，他会在内部从一个或多个入口点构建一个依赖图，然后将你项目中的每一个模块组合成一个或多个bundles，他们均为静态资源，用于展示你的内容。
核心概念
Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。
- 环境
Webpack 5 运行于 Node.js v10.13.0+ 的版本
更多概念可以查看webpack中文文档
搭建一个具有打包功能的项目
第一步、初始化项目
1、创建一个项目文件夹webpack
2、执行npm init -y
3、安装wepack webpack-cli
cnpm i --save-dev webpack webpack-cli
4、创建一个src文件夹, 在这个目录下创建一个入口文件index.js
console.log('入口文件')
第二步、使用webpack进行打包
1、创建一个打包文件输出目录dist
2、在根目录下创建webpack.config.js配置文件
const path = require('path')
const config = {
// 入口文件
entry: './src/index.js',
// 出口文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
module.exports = config
3、在package.json中配置打包命令
"scripts": {
"clean": "rm dist/bundle.js",
"build-dev": "webpack --mode development",
"build-prod": "webpack --mode production"
},
4、执行打包命令
npm run build-dev
这时就会在dist文件下创建一个bundle.js文件
5、在dist文件下创建一个index.html文件,引入bundle.js, 在浏览器中打开这个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打包CSS文件
我们都知道，webapck本身只能处理JS模块，如果要处理其他类型文件，就需要使用loader进行转换。
所以，我们需要先安装相关loader插件。CSS-loader是将CSS装载到JS；style-loader是让JS认识CSS
cnpm i --save-dev css-loader style-loader
修改webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
],
}
],
},
loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。
在src目录下创建style.css
body {
background-color: brown;
}
在index.js文件中引用
require('./style.css')
重新打包（先清空上次打包文件），再打开网页，就可以看到网页背景色已经改变了
第四步、引入html-webpack-plugin插件
如果我们想要在打包时，自动生成dist下的文件该怎么做呢？
这时我们就要自动生成一个HTML文件，而html-webpack-plugin插件就可以帮我们做到。
1、安装html-webpack-plugin
cnpm i --save-dev html-webpack-plugin
2、修改webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
....
plugins: [
new HtmlWebpackPlugin()
]
....
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
3、打包
运行打包命令npm run build-dev，我们可以再项目文件下直接生成一个dist文件，该文件下包含一个index.html和bundle.js文件。
生成的index.html内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script></head>
<body>
</body>
</html>
