-
webpack入门教程
目录
2：配置loader 在webpack.config.js添加
方式一：本地导入 使用webpack.ProvidePlugin
webpack官网：https://webpack.js.org/
webpack中文网：https://www.webpackjs.com
简介
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
创建webpack项目
1、电脑上安装好node
2、创建package.json文件
命令：npm init
// 输入项目名称版本描述作者等信息，跳过直接按回车，最后就会生成package.json文件
3、安装webpack
- 本地安装（推荐）
npm install --save-dev webpack
npm install --save-dev webpack-cli
- 全局安装
npm install --global webpack webpack-cli
安装完成后会在项目路径下生成package-lock.json文件
4、打包
默认入口 src/index.js //手动新建此文件
默认出口 dist/main.js
- 打包模式
编辑package.json配置文件的 scripts 块
"scripts": {
"dev": "webpack --mode development", // 开发环境
"pro": "webpack --mode production" // 生产环境
},然后在终端窗口使用命令即可打包：npm run dev // npm run pro
webpack核心配置文件config的使用
示例：修改默认打包时的入口和出口文件路径
1、在项目根路径下创建webpack.config.js文件
2、编辑webpack.config.js文件 信息如下：
const path = require("path");
module.exports = {
entry: "./public/index.js", // 这里是入口文件了
output: {
path: path.resolve(__dirname, "build"), // 这里是出口文件夹
filename: "bundle.js" // 这个是出口文件
}
}// 代码说明
path：指文件打包后存放的路径
entry：入口打包文件
path.resolve("", "")：将当前路径处理成绝对路径，第二个参数可以在第一个参数的绝对路径上使用../的方式指定到上级路径
__dirname：表示当前所在目录的绝对路径
filename：是打包后文件的名称
webpack打包多入口、多出口
1：单入口 多文件的形式
const path = require("path");
module.exports = {
entry:[ // 这里改成数组
"./src/index1.js",
"./src/index2.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
}
}
2：多入口 多出口的形式
const path = require("path");
module.exports = {
entry:{ // 这里改成对象
pageOne:"./public/pageOne/index.js",
pageTwo:"./public/pageTwo/index.js"
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].js" // 这里的name对应着entry的属性名就是(pageOne、pageTwo)
}
}
如何配置webpack-dev-server
1：了解webpack-dev-server
webpack-dev-server 是用来配置本地服务器的，使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server主要提供两个功能：
(1)：为静态文件提供web服务
(2)：自动刷新和热替换(HMR)
2：安装webpack-dev-server
npm install --save-dev webpack-dev-server
3：配置webpack.config.js文件
devServer: {
static: "./build", // 设置服务器访问的基本目录
host: "localhost", // 服务器的ip地址
port: 8080, // 端口号
open: true // 是否自动打开页面，true:自动打开，false:不打开compress: true, // 是否启用 gzip 压缩
hot: true // 模块热替换
}
4：配置package.json
"scripts": {
"start": "webpack-dev-server --mode development"
}
5：运行
(1)：先打包
npm run dev
(2)：启动服务器
npm run start
默认会访问 index.html页面，没有的话就显示如下
loder
1：简介
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import css文件
可以理解为使用webpack的话，以前写html时直接引用静态文件的方式将不起作用，处理非JavaScript静态文件，需要使用webpack提供的特定加载器才可以正常使用
2：安装css相关的loder
npm install --save-dev style-loader css-loader
3：配置loader
(1)：在webpack.config.js文件里配置module中的rules
在webpack的配置中loader有两个目标：
1. test属性，用于标识出应该被对应的loader进行转换的单个或者多个文件。
2. use属性，表示进行转换时，应该使用哪个loader。
module: {
rules: [
{
test: /\.css$/, // 正则表达式，表示以css文件结尾
use: ["style-loader", "css-loader"]
}
]
}
(2)：创建一个css文件，被js文件引用
(3)：打包：npm run dev
(4)：在出口目录创建一个.html文件，然后引入打包后的js
(5)：打开html页面，查看效果
less-loader
1：安装
npm install --save-dev less-loader less
2：创建一个less文件
3：配置loader
module: {
rules: [
{
test: /\.less$/,
use: [
"style-loader", "css-loader", "less-loader"
]
}
]
}(和css-loader一样，这里节省篇幅就不重复贴了) less文件被js引用，然后打包，然后html文件中引入less中的样式
sass-loader
1：安装
npm install --save-dev sass-loader node-sass
2：创建一个scss文件
3：配置loader
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}4：引入
5：打包 npm run dev
6：html引入scss样式，打开页面看效果
PostCSS处理浏览器前缀（处理浏览器兼容问题）
1：安装loader
npm install --save-dev postcss-loader autoprefixer
2：配置loader 在webpack.config.js添加
{
test:/\.css$/,
use:[
"style-loader",
"css-loader",
"postcss-loader"
]
}然后在项目根路径创建文件postcss.config.js (和webpack.config.js同级)
module.exports = {
plugins: [
// 兼容浏览器，添加前缀
require('autoprefixer')({
overrideBrowserslist: [
"ie >= 8",
"Firefox >= 20",
"Safari >= 5",
"Android >= 4",
"Ios >= 6"
//'last 10 versions', // 所有主流浏览器最近10版本用
],
grid: true
})
]
}
3：打包
npm run dev
4：引入js，查看效果
图片处理
1：安装loader
npm install --save-dev file-loader
2：配置loader
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
],
type: 'javascript/auto'
}
关于file-loader的options选项的说明：
name：为你的文件配置自定义文件名模板（默认值[hash].[ext]）
context：配置自定义文件的上下文，默认为 webpack.config.js
publicPath：为你的文件配置自定义 public 发布目录(为文件指定访问的域名目录)
outputPath：为你的文件配置自定义 output 输出目录(指定打包好后的文件存放目录)[ext]：资源扩展名
[name]：资源的基本名称
[path]：资源相对于 context的路径
[hash]：内容的哈希值3：给css中引入一张图片
4：打包
npm run dev
5：查看效果
字体处理
1：安装loader
npm install --save-dev file-loader
2：配置loader
{
test:/\.(ttf|woff|woff2|eot|svg)$/,
use:[{
loader:'file-loader',
options:{
outputPath:'font/' // 为打包好的文件指定目录，不然打包好后都在根目录下显得很乱
}
}]
}其他的与上面一样
第三方js库处理
* 示例：导入jquery库举例
方式一：本地导入 使用webpack.ProvidePlugin
webpack.ProvidePlugin：参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去
(1)：下载jquery库文件，导入到项目中
(2)：配置webpack.config.js
const webpack = require("webpack");
module.exports = {
resolve: {
alias: {
jQuery: path.resolve(__dirname, "public/js/jquery-3.6.1.min.js") // 这里写第三方库所在的路径
}
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jQuery"
})
]
}
(3)：在js文件中使用jquery库
(4)：打包、查看效果
方式二：使用npm安装的方式
(1)：安装jquery库
npm install --save-dev jquery
(2)：在js文件中引入jquery
import $ from "jquery"; // $：表示jquery变量名
(3)：在js文件中使用jquery
(4)：打包、查看效果
babel编辑es6语法
1：简介
目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。
babel转化语法所需依赖项：
babel-loader： 负责 es6 语法转化
babel-core： babel核心包
babel-preset-env：告诉babel使用哪种转码规则进行文件处理
2：安装依赖
npm install --save-dev babel-loader @babel/core @babel/preset-env
3：配置webpack.config.js
const path = require("path");
module.exports = {
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/, // exclude:表示排除查找目录
use: "babel-loader"
}
]
}
}4：配置转换规则
方式一：在根目录下新建.babelrc文件
方式二：配置webpack.config.js
const path = require("path");
module.exports = {
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
}
5：在js文件中使用es6语法，然后查看打包后的js文件是否是es5语法
转换前
转换后
自动生成HTML文件插件
1：简介
HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板打包后生成对应的 html 文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里
2：安装依赖
npm install --save-dev html-webpack-plugin
3：配置webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html", // 指定模板文件
filename: "main.html" // 指定打包后的html文件名称
})
]
}更多参数说明：
4：新建index.html模板文件
5：打包、查看效果
提取分离css文件打包到单独文件
1：安装依赖
npm install --save-dev mini-css-extract-plugin
2：配置webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module:{
rules:[
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename:"./css/index.css" // 打包后的css文件路径和名称
})
]
}3：打包、查看效果
npm run dev
压缩及优化css结构
1：安装插件
npm install --save-dev css-minimizer-webpack-plugin
2：配置webpack.config.js
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
new CssMinimizerPlugin({
test: /\.css(\?.*)?$/i, // 匹配要优化处理的文件，这个是默认值
parallel: true, // 是否使用多进程并发执行优化，// parallel: 4, 表示启用多进程并发执行且设置并发数
minimizerOptions: {
preset: [
"default", { discardComments: { removeAll: true }} // 是否去除注释
]
}
})
],
minimize: false // 是否在开发环境下启用 CSS 优化
}
}3：打包、查看效果
npm run dev
拷贝静态文件
1：简介
打包前的静态文件原封不动的拷贝到打包后的相同目录下
2：安装插件
npm install --save-dev copy-webpack-plugin
3：配置webpack.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: __dirname + "/public/js", // 打包前的文件存放目录
to: __dirname + "/build/js" // 打包后的文件存放目录
},
{
from: path.resolve(__dirname, "../public/img"), // 两种路径方式to: path.resolve(__dirname, "../build/img")
}
]
})
]
}4：打包、查看效果
npm run dev
打包之前清除旧的打包文件
1：安装插件
npm install --save-dev clean-webpack-plugin
2：配置webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 变量名称上的 花括号一定要带上
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}3：打包、查看效果
没使用此插件前，打包后，以下js文件其实都是同一个文件
使用插件后，打包之前把之前打包的旧文件删除了
HTML文件中引用图片
html-loader | webpack
区分生产环境和开发环境
1：安装
npm install --save-dev webpack-merge
2：创建3个文件，放不同环境的配置
webpack.common.config.js // 放公共的配置
webpack.dev.config.js // 放开发环境的配置
webpack.pro.config.js // 放生产环境的配置
编辑 webpack.common.config.js (示例，请根据实际情况配置)
const path = require("path");
const webpack = require("webpack");module.exports = {
// 如果有公共的配置，就写上
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'), //注意路径问题
filename: "bundle.js"
},
devServer: {
static: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器的ip地址
port: 8080, //端口
open: true, //自动打开页面,
},
module: {
// 公共module...
rules: [
{
test:/\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
optimization: {
// 公共...
},
plugins: [
// 公共插件...
]
}编辑 webpack.dev.config.js
const path = require("path");
const webpack = require("webpack");
const { merge } = require('webpack-merge'); // 引入区分环境的工具
const common = require('./webpack.common.config.js'); // 引入公共配置文件module.exports = merge(common,{ // 使用 merge方法
// 如果有开发环境的配置，就写上
module: {
// 开发环境module...
},
optimization: {
// 开发环境...
},
plugins: [
// 开发环境...
]
})编辑 webpack.pro.config.js
const path = require("path");
const webpack = require("webpack");
const { merge } = require('webpack-merge'); // 引入区分环境的工具
const common = require('./webpack.common.config.js'); // 引入公共配置文件module.exports = merge(common,{ // 使用 merge方法
// 如果有生产环境的配置，就写上
module: {
// 生产环境module...
},
optimization: {
// 生产环境...
},
plugins: [
// 生产环境插件...
]
})3：配置package.json
// 使用 --config 指定配置文件
"scripts": {
"dev": "webpack --mode development --config ./config/webpack.dev.config.js",
"pro": "webpack --mode production --config ./config/webpack.pro.config.js",
"start": "webpack-dev-server --mode development --config ./config/webpack.dev.config.js"
}
4：打包
npm run dev // npm run pro
-
相关阅读:
机器学习-随机森林算法预测房租模型
postgresql14-用户与角色（二）
基于K8s构建Jenkins持续集成平台（部署流程）（转了一点）
ps插件：alpaca增效工具 (完美替代AI创成式填充) 2.8.1 中文版
我的设置页面
ParCNetV2: Oversized Kernel with Enhanced Attention（超大的内核，增强了注意力）
成都理工大学_Python程序设计_第2章
基于C# wimfom框架的图书管理系统开题报告
springboot集成kafka详解
sql-lab 通关笔记
- 原文地址：https://blog.csdn.net/a1053765496/article/details/124129126