什么是webPack
当你构建一个现代的web应用时，通常需要将多个JavaScript文件、CSS文件和其他资源文件打包成一个或多个文件，以提高网站的性能和加载速度。Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，它可以将你的代码和依赖项转换为静态资产，例如一个或多个 JavaScript 文件和一个或多个 CSS 文件。
Webpack 是一个功能强大的静态模块打包器，可以处理多种类型的文件，并提供了丰富的配置选项和插件，可以帮助你快速构建高性能的现代web应用程序。
重要概念：
代码案例：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
这个Webpack配置文件中，我们指定了一个入口文件 ./src/index.js，一个输出文件 bundle.js，并且指定了一个加载器 babel-loader，用于将JavaScript文件转换为浏览器可以理解的语法。我们还使用了一个插件 HtmlWebpackPlugin，用于生成一个HTML文件，自动引入打包后的JavaScript文件。
当Webpack遇到一个模块引入语句（比如import或require）时，它会根据配置文件中的module选项来确定如何处理这个模块。
module选项是一个对象，包含一个rules属性，该属性是一个数组，每个数组元素都是一个对象，表示一个模块匹配规则。每个规则对象必须至少包含三个属性：
test：一个正则表达式，用于匹配需要处理的文件。use：一个加载器对象或者一个加载器名称的数组，用于指定如何处理匹配到的文件。exclude：一个正则表达式，用于排除某些文件。在上面的例子中，我们指定了两个模块匹配规则。第一个规则匹配所有的JavaScript文件，但排除了node_modules目录中的文件，使用了babel-loader来将ES6+代码转换成ES5代码。第二个规则匹配所有的CSS文件，并使用了style-loader和css-loader来处理CSS文件，这两个加载器的作用是将CSS文件转换成一个可以在浏览器中使用的<style>标签。
除了上述常用的加载器，Webpack还有很多其他的加载器，比如file-loader、url-loader、less-loader、sass-loader等等，可以满足不同的需求。当然，也可以开发自己的加载器来扩展Webpack的功能。
让我们手动搭建一个Vue项目吧
1.初始化项目：创建一个新的文件夹，进入文件夹并使用npm或者yarn初始化一个新的项目。
mkdir my-vue-app
cd my-vue-app
npm init -y
2.安装依赖：安装Vue和Webpack相关依赖。
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server css-loader vue-style-loader babel-loader @babel/core @babel/preset-env html-webpack-plugin --save-dev
3.配置Webpack：在项目根目录下创建一个webpack.config.js文件，并完成基本的Webpack配置，包括入口文件、输出文件、加载器、插件等。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.vue$/,
exclude: /node_modules/,
use: 'vue-loader',
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 8080,
},
};
4.创建组件：在src目录下创建Vue组件，比如App.vue和main.js。
// App.vue
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!',
};
},
};
</script>
<style>
h1 {
color: blue;
}
</style>
// main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: (h) => h(App),
}).$mount('#app');
5.创建HTML文件：在public目录下创建一个index.html文件，并将Vue组件嵌入到HTML文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
6.运行项目：在命令行中输入npm run start启动开发服务器，访问http://localhost:8080即可看到Vue组件的效果。
"scripts": {
"start": "webpack-dev-server --mode development --
如何自制一个plugins 组件
要自制一个Webpack插件（plugins），需要了解Webpack插件的基本结构和用法。Webpack插件通常是一个JavaScript对象，它包含一个或多个钩子函数，用于在Webpack构建过程中执行自定义逻辑。
以下是一个简单的Webpack插件例子，它会在Webpack构建完成后，输出构建耗时：
class BuildTimePlugin {
apply(compiler) {
compiler.hooks.done.tap('BuildTimePlugin', (stats) => {
console.log(`Build time: ${stats.endTime - stats.startTime}ms`);
});
}
}
module.exports = BuildTimePlugin;
在上面的例子中，我们定义了一个BuildTimePlugin插件，它包含一个apply方法，用于接收Webpack的Compiler实例，并注册一个done钩子函数。当Webpack构建完成后，done钩子函数会被触发，我们就可以在里面执行自定义的逻辑。
这个插件可以通过以下方式在Webpack配置文件中使用：
const BuildTimePlugin = require('./BuildTimePlugin');
module.exports = {
// ...
plugins: [
new BuildTimePlugin(),
],
};
在上面的Webpack配置中，我们将自定义的BuildTimePlugin插件实例化，并将它添加到了plugins数组中，这样在Webpack构建过程中就会自动运行我们定义的插件，并输出构建耗时。