webpack是许多前端工作者都会接触的一项技术，它对于代码的优化效果是毋庸置疑的，但是其繁杂的操作对于初入前端的小白无疑是非常困扰的，今天就来讲一下webpack基础的引入和使用。
基础概念
webpack是现代JavaScript应用程序的 静态模块打包器。
当webpack处理应用程序时，它会把一个巨大的文件分别打包成一个或者多个bundle从而实现代码的优化，毕竟大部分优化的过程都是实现从繁到简的过程。
一，安装
首先要确保你的电脑上具备nodejs的环境，之后通过 win+r 输入 cmd 转到控制台（这个控制台打开就暂时不要关了后续还会用到），输入如下代码
md mypack
//创建一个名为mypack的文件夹
cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立
npm init
// 初始化项目文件夹 会创建一个package.js
npm i webpack webpack-cli -D
//安装wewebpack 和 webpack-cli好了我们就有了如下的文件
之后在根目录 mypack 下创建一个src文件夹
然后在src文件夹下创建两个名为 header.js 和 index.js 的 JavaScript 文件
header.js内容如下
var elem = document.createElement("div");//创建一个节点
elem.innerHTML = "hello，webpack";//设置内容
export default elem;//导出节点index.js内容如下
import elem from "./header.js";//导入节点
document.body.appendChild(elem);//插入到页面好了，现在我们就有了一个最基础的webpack打包程序了，在 cmd 控制台输入如下代码
cd /mypack //转到mypack文件夹
C:\myback>npx webpack
//输入完后根目录会生成一个dist文件，文件里会有一个main.js
之后可以在 dist 文件夹下新建一个html页面检查一下我们的成果，在 body 下方插入
<script src="./main.js"></script>再打开新建的文件我们就可以在页面上看到 “hello，webpack”的字样了。
二，实用配置文件
在文件夹mypack之下新建一个webpack.config.js的文件（一定要为这个名字不能随意改名）
之后在该文件内写如下代码
module.exports = { // node中导出模块
entry: "./src/index.js",// 指定文件的入口
output: { //出口
filename: "main.js",// 定义文件名
path: __dirname + "dist", // 定义文件夹 // __dirname获取当前目录
},
mode: "production", //产品模块
};
在cmd控制台中执行npx webpack命令实现打包。
三，使用webpack-dev-server 重启服务器进行更新
在cmd控制台输入如下命令
npm i webpack-dev-server html-webpack-plugin -D 在根目录mypack文件夹下创建一个public文件夹存储公共数据，并在public文件夹下建立一个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>index</title>
</head>
<body>
</body>
</html>在我们最一开始自动生成的三个文件中选中名为package.json的文件在里面的script里面添加如下代码
"scripts": {
"build": "webpack",
"serve": "webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},在webpack.config.js配置文件中导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");然后实例化插件plugins
module.exports = { // node中导出模块
entry: "./src/index.js",// 指定文件的入口
output: { //出口
filename: "main.js",// 定义文件名
path: __dirname + "dist", // 定义文件夹 // __dirname获取当前目录
},
plugins: [ // 实例化vue插件
new HtmlWebpackPlugin({//指定模板
template: "./public/index.html",
}),
],
mode: "production", //产品模块
};
然后添加本地服务设置devserver
module.exports = { // node中导出模块
entry: "./src/index.js",// 指定文件的入口
output: { //出口
filename: "main.js",// 定义文件名
path: __dirname + "dist", // 定义文件夹 // __dirname获取当前目录
},
plugins: [ // 实例化vue插件
new HtmlWebpackPlugin({//指定模板
template: "./public/index.html",
}),
],
mode: "production", //产品模块
devServer: {
open: true, //打开浏览器
host: "localhost", //本地域名
port: 8080, //端口号
hot: true, //热加载
}，
};
最后在cmd控制台输入npm run serve 页面就可以显示啦。
四，各式各样的加载器（loader）
加载器让webpack有了处理更多其他格式文件的能力
style-loader:把插入style标签
css-loader:把css插入到style中并加载css
在cmd控制台中输入：
npm i style-loader css-loader -D在webpack.config.js中添加module模块：
module.exports = { // node中导出模块
entry: "./src/index.js",// 指定文件的入口
output: { //出口
filename: "main.js",// 定义文件名
path: __dirname + "dist", // 定义文件夹 // __dirname获取当前目录
},
plugins: [ // 实例化vue插件
new HtmlWebpackPlugin({//指定模板
template: "./public/index.html",
}),
],
module:{
// 规则
rules:[
{
//测试.css文件结尾
test:/\.css$/,
// 使用两个loader加载器
use:["style-loader","css-loader"],
}
]
}，
mode: "production", //产品模块
devServer: {
open: true, //打开浏览器
host: "localhost", //本地域名
port: 8080, //端口号
hot: true, //热加载
}，
};