©2020-2024 ioDraw All rights reserved
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
全局安装
npm install -g webpack webpack-cli
安装后查看版本号
webpack -v
（1）安装webpack工具
npm install -g webpack webpack-cli
（2）创建js文件用于打包操作
-- 文件a.js function sub(a,b){ return a-b; } module.exports={ sub } -- 文件b.js
function add(a,b){ return a+b; } module.exports={ add } -- 文件style.css body{
background-color: red; } --文件main.js，需要引入需要打包的文件，直接引入或者关联引入 const a=require(
'./a.js') const b=require("./b.js") require("./style.css") document.write(a.sub(
3,2)+"---"+b.add(1,2))
（3）安装css加载器
npm install --save-dev style-loader css-loader
（4）构建配置文件
const path=require("path"); module.exports = { //入口函数 entry: "./src/js/main.js"
, //输出路径 output: { path: path.resolve(__dirname,"./dest"), filename: "bundle.js"
}, module: { //CSS加载 loaders: [ { test: /\.css$/, use: ["style-loader",
"css-loader" ]} ] } };
（5）执行打包
webpack #有黄色警告
webpack --mode=development #打包后文件格式化
webpack --mode=production #打包后文件压缩一行
（6）测试使用
创建html页面，引入打包后的文件即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="
../dest/bundle.js"></script> </head> <body> </body> </html>