好看的网页千篇一律，有趣的代码万里挑一。
大家好，我是云瑶糖糖，你也可以称呼我糖糖，主攻web前端，这篇简书说说webpack。
webpack 是静态模块打包器
概念
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
food (4).png
哈哈，不是吃的包哦，不过这样也可以加深印象，
像包子一样很有料
1638775189(1).png
1638775669(1).png
webpack默认会通过 index.js 作为入口文件 作为起点开始打包
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs规范
webpack 五个核心概念
- entry 入口 webpack 以哪个文件为入口起点开始打包
- output 输出 webpack 打包后的资源
- loader 翻译官 让 webpack 能够去处理那些非 javascript 文件 (webpack自身只理解javascript文件和json文件)
- plugins 插件 可以用于执行范围更广的任务，功能比loader更强
- mode 模式 (development 开发模式 本地调试运行的环境；production 生产模式 上线运行的环境)
webpack配置文件
webpack.config.js
作用：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
基本配置：
//路径模块
const path = require("path");
//导入清除插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//导入生成html页面的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入独立生成css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
//设置模式：production是生成模式，development是开发模式
mode: "production",
//入口
entry: "./src/main.js",
//出口
output: {
//打包之后的文件名
filename: "js/app.js",
//打包路径
path: path.resolve(__dirname, "dist"),
},
//插件
plugins: [
//重新打包时，清除之前打包文件的插件
new CleanWebpackPlugin(),
//生成html文件的插件
//默认会创建一个空的html文件，自动引入打包输出的所有资源（JS、CSS）
//也可以指定一个html文件作为模板
new HtmlWebpackPlugin({
template:"./public/index.html"
}),
//生成独立css文件的插件
new MiniCssExtractPlugin({
//设置生成的css文件的名称和路径
filename:"css/app.css"
})
],
//loader的配置
module: {
//规则，详细loader配置，不同文件必须配置不同loader处理
rules: [
// 识别图片文件
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
/* {
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
//选项
options: {
//文件名([原文件名]_[随机返回hash值].[原扩展名])
name:'imgs/[name]_[hash].[ext]',
//最低参与打包文件的大小（单位是字节）
limit: 2048,
//问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
//解析时会出问题：[object Module]
//解决：关闭url-loader的es6模块化，使用commonjs解析
esModule:false,
}
}
]
}, */
/* {
test:/\.html$/,
//处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader:'html-loader'
}, */
// 识别样式文件
{
test: /\.css$/,
// use数组中loader执行顺序：从右到左，从下到上依次执行
// css-loader：将css文件变成commonjs模块加载js中
// style-loader：创建style标签，将js中的样式资源插入进去
use: ['style-loader','css-loader']
}
/* {
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
} */
/* {
test: /\.css$/i,
use: [{
loader:MiniCssExtractPlugin.loader,
options:{
// 当前的css所在的文件相对于打包后的根路径dist的相对路径
publicPath: '../'
}
}, 'css-loader'],
} */
],
},
};
vue-loader：
//路径模块
const path = require("path");
//导入清除插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//导入生成html页面的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入独立生成css文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//导入vue-loader插件
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
//设置模式：production是生成模式，development是开发模式
mode: "production",
//入口
entry: "./src/main.js",
//出口
output: {
//打包之后的文件名
filename: "js/app.js",
//打包路径
path: path.resolve(__dirname, "dist"),
},
//插件
plugins: [
//重新打包时，清除之前打包文件的插件
new CleanWebpackPlugin(),
//生成html文件的插件
//默认会创建一个空的html文件，自动引入打包输出的所有资源（JS、CSS）
//也可以指定一个html文件作为模板
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
//生成独立css文件的插件
new MiniCssExtractPlugin({
//设置生成的css文件的名称和路径
filename: "css/app.css",
}),
//用于识别vue的单文件组件的插件
new VueLoaderPlugin(),
],
//loader的配置
module: {
//规则，详细loader配置，不同文件必须配置不同loader处理
rules: [
// 使用vue-loader加载器，去识别.vue组件
{
test: /\.vue$/,
loader: "vue-loader",
},
// 识别字体文件
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
},
],
},
// 识别图片文件
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
/* {
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "url-loader",
//选项
options: {
//文件名([原文件名]_[随机返回hash值].[原扩展名])
name: "imgs/[name]_[hash].[ext]",
//最低参与打包文件的大小（单位是字节）
limit: 2048,
//问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
//解析时会出问题：[object Module]
//解决：关闭url-loader的es6模块化，使用commonjs解析
esModule:false,
},
},
],
}, */
/* {
test:/\.html$/,
//处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader:'html-loader'
}, */
// 识别样式文件
{
test: /\.css$/,
// use数组中loader执行顺序：从右到左，从下到上依次执行
// css-loader：将css文件变成commonjs模块加载js中
// style-loader：创建style标签，将js中的样式资源插入进去
use: ['style-loader','css-loader']
}
/* {
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
}, */
/* {
test: /\.css$/i,
use: [{
loader:MiniCssExtractPlugin.loader,
options:{
// 当前的css所在的文件相对于打包后的根路径dist的相对路径
publicPath: '../'
}
}, 'css-loader'],
} */
],
},
//开发服务器相关
//开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
//特点：只会在内存中编译打包，不会有任何输出
//启动devServer指令为：npx webpack-dev-server
devServer: {
//端口号
port: 8848,
//自动打开页面
open: true,
},
//解析
resolve: {
//路径
alias: {
// __dirname是nodejs里面的全局变量，表示当前项目的路径
"@": path.resolve(__dirname, "src"),
"@c": path.resolve(__dirname, "src/components"),
},
},
};
对应的package
- npm install webpack@4.41.6 -D
- npm install webpack-cli@3.3.11 -D
- npm install css-loader@3.4.2 -D
- npm install style-loader@1.1.3 -D
- npm install file-loader@5.0.2 -D
- npm install url-loader@3.0.0 -D
- npm install html-loader@0.5.5 -D
- npm install mini-css-extract-plugin@0.9.0 -D
- npm install html-webpack-plugin@3.2.0 -D
- npm install clean-webpack-plugin@3.0.0 -D
- npm install webpack-dev-server@3.10.3 -D
- npm install vue-loader@15.9.6 -D
- npm install vue-template-compiler@2.6.12 -D
- npm install vue@2.6.12 -S
- npm install element-ui@2.15.1 -S
scripts配置
"serve": "webpack",
"build": "npx webpack-dev-server"
网友评论