1.先创建项目 npm init -y
2.安装webpack
npm i webpack -D
3.安装webpack-cli
npm i webpack-cli -D
4. 创建文件src/index.js
function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);
5. wepack 打包
npx webpack ./src/index.js --mode=development
6.使用webpack配置文件
在项目根目录下新建文件：webpack.config.js
// Node.js的核心模块，用于处理文件路径
const path = require('path');
module.exports = {
// 模式
mode: 'development',
// 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径
entry: path.resolve(__dirname, 'src', 'index.js'),
// 出口 webpack 输出结果的相关配置
output: {
path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径（使用 Node.js 的 path 模块）
filename: 'bundle.js' // 输出文件的文件名
},
// 模块 处理项目中各种不同类型的模块
module: {
// 暂时只有js文件，现在用不着
},
// 插件列表 webpack各种扩展功能
plugins: [],
}
7. 配置脚本命令
"scripts": {
"build": "webpack"
}
8.处理各种资源
-
css
-
npm i css-loader style-loader --save-dev -
rules: [ { test: /\.css$/, use: [ "style-loader", "css-loader" ], include: path.join(__dirname, 'src'), exclude: /node_modules/ } ] -
less
-
npm i less-loader node-sass sass-loader --save-dev -
{ test: /\.less$/, use: [ "style-loader", "css-loader", "less-loader" ], include: path.join(__dirname, 'src'), exclude: /node_modules/ } -
sass
-
{ test: /\.s[ac]ss$/, use: [ "style-loader", "css-loader", "sass-loader" ], include: path.join(__dirname, 'src'), exclude: /node_modules/ } -
处理图片
-
{ test: /\.(png|jpe?g|gif|webp)$/, type: "asset", parser: { dataUrlCondition: { maxSize: 10 * 1024 // 小于10kb的图片会被base64处理 } }, generator: { // 将图片文件输出到 static 目录中 // 将图片文件命名 [hash:8][ext][query] // [hash:8]: hash值取8位 // [ext]: 使用之前的文件扩展名 // [query]: 添加之前的query参数 filename: "static/[hash:8][ext][query]", }, } -
处理JS
-
{ test: /\.js/, use: { loader: 'babel-loader', options: { presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合 } } } -
处理html资源
-
npm install html-webpack-plugin -D
-
const htmlWebpackPlugin = require('html-webpack-plugin') // 插件配置列表 webpack各种扩展功能 plugins: [ new htmlWebpackPlugin({ filename: 'index.html', // 输出文件的名称 // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源 template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径 title: 'webpack-index' // 生成页面的标题 }) ], -
开发服务器
-
npm i webpack-dev-server -D devServer: { port: 8088, // 服务器启动端口号 static: path.join(__dirname, 'dist'), // 服务器静态资源目录 open: false, // 启动服务器后自动打开浏览器 compress: true, // 开启gzip压缩 }
9.css方面优化
-
单独文件
-
npm i mini-css-extract-plugin -D
-
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], include: path.join(__dirname, 'src'), exclude: /node_modules/ } plugins: [ // 提取css成单独文件 new MiniCssExtractPlugin({ // 定义输出文件名和目录 filename: "static/css/main.css", }), ]
10.总共配置
-
package.json
-
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.19.3", "@babel/preset-env": "^7.19.4", "babel-loader": "^8.2.5", "css-loader": "^6.7.1", "css-minimizer-webpack-plugin": "^4.2.2", "html-webpack-plugin": "^5.5.0", "less": "^4.1.3", "less-loader": "^11.1.0", "mini-css-extract-plugin": "^2.6.1", "node-sass": "^7.0.3", "sass-loader": "^13.1.0", "style-loader": "^3.3.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1" }} -
webpack.config.js
-
内容如下
// Node.js的核心模块，用于处理文件路径const path = require('path');// 引入插件const htmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require("mini-css-extract-plugin");const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");// 获取处理样式的Loadersconst getStyleLoaders = (preProcessor) => { return [ MiniCssExtractPlugin.loader, "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-preset-env", // 将package文件中的css兼容性样式引入进来 ], }, }, }, preProcessor, ].filter(Boolean);};module.exports = { // 模式 mode: 'development', // 入口 告诉webpack从哪个文件开始进行打包 path.resolve()方法返回一个绝对路径 __dirname 当前文件的文件夹绝对路径 entry: path.resolve(__dirname, 'src', 'index.js'), // 出口 webpack 输出结果的相关配置 output: { path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径 必须是绝对路径（使用 Node.js 的 path 模块） filename: 'bundle.js', // 输出文件的文件名 clean: true, // 自动将上次打包目录资源清空 }, // 模块 处理项目中各种不同类型的模块 module: { rules: [{ test: /\.css$/, use: getStyleLoaders(), include: path.join(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.less$/, use: getStyleLoaders("less-loader"), include: path.join(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.s[ac]ss$/, use: getStyleLoaders("sass-loader"), include: path.join(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.(png|jpe?g|gif|webp)$/, type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式 parser: { dataUrlCondition: { maxSize: 10 * 1024 // 小于10kb的图片会被base64处理 } }, generator: { // 将图片文件输出到 static 目录中 // 将图片文件命名 [hash:8][ext][query] // [hash:8]: hash值取8位 // [ext]: 使用之前的文件扩展名 // [query]: 添加之前的query参数 filename: "static/[hash:8][ext][query]", }, }, { test: /\.js/, use: { loader: 'babel-loader', options: { presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合 } } } ] }, // 插件配置列表 webpack各种扩展功能 plugins: [ new htmlWebpackPlugin({ filename: 'index.html', // 输出文件的名称 // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源 template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径 }), // 提取css成单独文件 new MiniCssExtractPlugin({ // 定义输出文件名和目录 filename: "static/css/main.css", }), // css压缩 new CssMinimizerPlugin(), ], // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器） // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为：webpack-dev-server devServer: { port: 8088, // 服务器启动端口号 static: path.join(__dirname, 'dist'), // 服务器静态资源目录 open: false, // 启动服务器后自动打开浏览器 compress: true, // 开启gzip压缩 }}
