webpack（4版本）使用

news2025/2/24 11:56:04

webpack简介：

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前

端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分

析，打包生成对应的静态资源(bundle)

webpack的五大核心：

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环

境中的变量等。

模式(Mode)指示 webpack 使用相应模式的配置。

webpack初始化配置

初始化 package.json

npm init -y

加上-y后不需要进行交互，下载更快

下载webpack

npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
# 本地安装
npm i webpack@4.41.6 webpack-cli@3.3.11 -D

编译打包应用

1. 创建文件

2. 运行指令

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的

语法。

生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

功能：在开发配置功能上多一个功能，压缩代码。

3. 结论

webpack 能够编译打包 js 和 json 文件。

能将 es6 的模块化语法转换成浏览器能识别的语法。

能压缩代码。

4. 问题

不能编译打包 css、img 等文件。

不能将 js 的 es6 基本语法转化为 es5 以下语法

webpack 开发环境的基本配置

创建配置文件

手动在根目录下新建一个 webpack.config.js文件

配置内容：

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
module.exports = {
entry: './src/index.js', // 入口文件
output: { 
 // 输出配置
    filename: "./built.js", // 输出文件名
    path: resolve(__dirname, "build"), // build是输出文件路径配置，__dirname是根目录
},
mode: 'development' //开发环境
};

mode可以在webpack.config.js中配置，也可以在我们的package.json中配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development",
    "dev": "webpack-dev-server"
  },

mode只需要在一个文件中配置即可，不需要两个都配置

因为我们在package.json中给webpack配置了一个build，所以我们的运行命令是npm run build

打包样式资源

1.创建文件
2.下载安装 loader 包
npm i css-loader@3.4.2 style-loader@1.1.3 less-loader@5.0.0 less@3.11.1 -D
3.修改配置文件
const { resolve } = require("path"); // node 内置核心模块，用来处理路径问题。

module.exports = {
    mode: 'development',   
  entry: "./src/index.js", // 入口文件
  output: {
    // 输出配置
    filename: "./built.js", // 输出文件名
    path: resolve(__dirname, "build"), // 输出文件路径配置
  },
  module:{
    rules:[
        {
            test: /\.(c|le|sc)ss$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
               ],
            },
    ]
  },
};

(c|le|sc)ss$是（css||scss||less）的简写

use中的loader中的执行顺序是从后向前进行执行

4.运行命令
npm run build

打包html资源

  1. 创建文件
  1. 安装plugin包
npm install --save-dev html-webpack-plugin@3.2.0
  1. 修改配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
]
},
plugins: [
     // plugins 的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的 HTML 文件
new HtmlWebpackPlugin({
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
        template: './src/index.html'
})
],
mode: 'development'
  1. 运行指令
npm run build

打包完成之后我们的build文件

打包图片资源

  1. 创建文件
  1. 安装plugin包
npm install --save-dev html-loader@0.5.5 url-loader@3.0.0 file-loader@5.0.2
  1. 修改配置文件

const { resolve } = require("path"); // node 内置核心模块，用来处理路径问题。

module.exports = {
    mode: 'development',   
  entry: "./src/index.js", // 入口文件
  output: {
    // 输出配置
    filename: "./built.js", // 输出文件名
    path: resolve(__dirname, "build"), // 输出文件路径配置
  },
  plugins:[
  
  ],

  module:{
    rules:[
       
        {
            test:/\.(jpg|png|jpeg|gif)$/,
            loader: "url-loader",
            options: {
                limit: 6 * 1024,// 最大限制图片
                name: "[name].[hash:10].[ext]", //图片命名+哈希值保留位数+后缀
                outputPath: "images", //导出路径
                esModule: false,  //是否是模块
                },
        },
        {
            //用来解析在html文件中的图片
            test: /\.html$/,
            loader: "html-loader",
            },
     
    ]
  },
 
};

上面我们给图片设置了一个limit，如果我们图片超出了我们limit限制，我们的文件名就会按照我们name中定义的形式来对我们的图片进行命名和后缀的添加，如果没有超出我们的limit限制，图片机会打包到我们built.js文件中，是base64格式，复制之后可以直接在src中运行展示图片

  1. 运行命令同上

打包其他资源

  1. 修改配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他资源(除了 html/js/css 资源以外的资源)
{
// 排除 css/js/html 资源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
3.6 devserv
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
  1. 运行命令npm run build

devserver

  1. 安装plugin包
npm i webpack-dev-server@3.10.3 -D
  1. 修改配置文件
const { resolve } = require("path"); // node 内置核心模块，用来处理路径问题。

module.exports = {
    mode: 'development',   // mode=production
  entry: "./src/index.js", // 入口文件
  output: {
    // 输出配置
    filename: "./built.js", // 输出文件名
    path: resolve(__dirname, "build"), // 输出文件路径配置
  },
  plugins:[
   
  ],

  module:{

  
  },
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动 gzip 压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
    }

};

devserver就是把我们的项目运行在服务器上，默认他走的是本地打包的一个地址

配置上devserve之后，他就会执行我们的服务器的端口地址

在package.json中配置我们的运行命令

配置完以后我们的运行命令就是npm run dev

总结开发环境配置

配置文件

const { resolve } = require("path"); // node 内置核心模块，用来处理路径问题。

const HtmlWebpackPlugins=require('html-webpack-plugin')
// css分成单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
process.env.NODE_ENV = 'development'
module.exports = {
    mode: 'development',   // mode=production
  entry: "./src/index.js", // 入口文件
  output: {
    // 输出配置
    filename: "./built.js", // 输出文件名
    path: resolve(__dirname, "build"), // 输出文件路径配置
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugins({
        template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
        filename: './src/css/main.css',
        }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],

  module:{
    rules:[
        {
            test: /\.(c|le)ss$/,
            use: [MiniCssExtractPlugin.loader,
                'css-loader',
                 {
                loader: 'postcss-loader',//预处理，这里指的是在解析css之前，做一下兼容性处理
                options: {
                ident: 'postcss',
                plugins: () => [require('postcss-preset-env')()],
                },
                },
               ],
            },
        {
            test:/\.(jpg|png|jpeg|gif)$/,
            loader: "url-loader",
            options: {
                limit: 6 * 1024,// 最大限制图片
                name: "[name].[hash:10].[ext]", //图片命名+哈希值保留位数+后缀
                outputPath: "images", //导出路径
                esModule: false,  //是否是模块
                },
        },
        {
            //用来解析在html文件中的图片
            test: /\.html$/,
            loader: "html-loader",
            },
     
    ]
  },
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动 gzip 压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
    }

};

下载的所有loader

webpack 生产环境的基本配置

提取 css 成单独文件

1.下载插件
npm install --save-dev mini-css-extract-plugin@0.9.0
2.修改配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'built.js',
},
module: {
rules: [
{
    test: /\.(c|le)ss$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
        filename: 'css/main.css',
    }),
],
mode: 'development',
}

css 兼容性处理

  1. 下载loader
npm install --save-dev postcss-loader@3.0.0 postcss-preset-env@6.7.0
  1. 配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
process.env.NODE_ENV = 'development'
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'built.js',
},
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',//预处理，这里指的是在解析css之前，做一下兼容性处理
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()],
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new MiniCssExtractPlugin({
filename: 'css/main.css',
}),
],
mode: 'development',
}

需要注意的是，css-loader必须在postcss-loader之前，否则会报错，报错如下所示

3.修改配置文件package.json
"browserslist": {
"development": [//测试过程中需要兼容的浏览器
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
4.css文件举例
html,
body {
height: 100%;
background-color: #456;
color: #fff;
}
.box1 {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.box2 {
width: 200px;
height: 200px;
background-color: aqua;
display: flex;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

压缩css

  1. 下载安装包
npm install --save-dev optimize-css-assets-webpack-plugin@5.0.3
2.配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpackplugin')
process.env.NODE_ENV = 'development'
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'built.js',
},
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()],
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new MiniCssExtractPlugin({
filename: 'css/main.css',
}),
new OptimizeCssAssetsWebpackPlugin(),
],
mode: 'development',
}

clean-webpack-plugin

  1. 下载插件
npm install --save-dev clean-webpack-plugin
2.配置文件
const { resolve } = require("path"); // node 内置核心模块，用来处理路径问题。

const {CleanWebpackPlugin}=require('clean-webpack-plugin')

module.exports = {
    mode: 'development',   // mode=production
  entry: "./src/index.js", // 入口文件
  output: {
    // 输出配置
    filename: "./built.js", // 输出文件名
    path: resolve(__dirname, "build"), // 输出文件路径配置
  },
  plugins:[
    new CleanWebpackPlugin(),
 
  ],
};

我们打包一次，就会有一个build文件夹，但是如果我们想要更新我们的打包文件，只能把之前的删除掉之后再重新打包，非常的麻烦，clean-webpack-plugin就是解决这一问题的

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/347990.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

sentinel持久化方案

sentinel持久化方案

一.sentinel规则推送原理 1.原有内存规则存储原理 (1)dashborad中请求到服务器后，在controller中通过http把规则直接推送给client，client接收后把规则放入内存； 2.持久化推送规则原理 ![在这里插入代码片](https://img-blog.csdnimg.cn/1…
阅读更多...
质量保障体系建设演进案例

质量保障体系建设演进案例

在业务早期发展阶段，主要是产品驱动、研发和测试互相配合。不同的测试方法是验证和保障交付质量的手段，而不是构建质量体系的基石。测试的努力带来的更多是一些“安全感”，而非安全保障。因此，要做到高质量的交付，就需…
阅读更多...
k8s简单搭建

k8s简单搭建

前言 最近学习k8s，跟着网上各种教程搭建了简单的版本，一个master节点，两个node节点，这里记录下防止以后忘记。 具体步骤 准备环境 用Oracle VM VirtualBox虚拟机软件安装3台虚拟机，一台master节点，两台…
阅读更多...
Wails简介

Wails简介

https://wails.io/zh-Hans/docs/introduction 简介 Wails 是一个可让您使用 Go 和 Web 技术编写桌面应用的项目。 将它看作为 Go 的快并且轻量的 Electron 替代品。 您可以使用 Go 的灵活性和强大功能，结合丰富的现代前端，轻松的构建应用程序。 功能…
阅读更多...
mac上安装mysql

mac上安装mysql

mac上安装mysql1. 关于Linux上安装mysql2. 下载安装2.1 下载2.2 安装3. 客户端连接mysql3.1 先查看mysql服务3.2 连接mysql客户端3.2.1 终端使用命令连接3.2.2 可视化工具连接3.3 其他简单操作（启动服务等）3.3.1 可视化界面操作4. 配置环境变量4.1 配置环…
阅读更多...
视图、索引、存储过程、触发器

视图、索引、存储过程、触发器

视图、索引、存储过程、触发器 group by补充： 规范来说，分组查询中，select后的字段只能是group by的字段或者是聚合函数。mysql在这有一个小优化，分组后如果某个字段的所有记录相同，同样可以select。 视图 视图是虚拟…
阅读更多...
一文详解java.nio.ByteBuffer

一文详解java.nio.ByteBuffer

java.nio.ByteBuffer是一个可以进行缓冲区分配、读取和写入的缓冲区，其持有一个字节数组，并通过4个属性：capacity、limit、position、mark来管理缓冲区，进行字节级别读取和数据写入。基于此，ByteBuffer常被用来处理网络…
阅读更多...
MySql数据库约束

MySql数据库约束

概述、目的 概念：约束是作用于表中字段上的规则，用于限制存储在表中的数据。 目的：保证数据库中数据的正确性、有效性和完整性。 分类： 约束描述关键字非空约束限制该字段的数据不能为nullNOT NULL唯一约束保证该字段的所有数据都…
阅读更多...
【闲聊杂谈】高并发下基于LVS的负载均衡

【闲聊杂谈】高并发下基于LVS的负载均衡

1、使用http协议进行网络请求 在前几年公布的用户入网数据中，移动入网的数量已经达到六七亿的规模，固网用户数也达到三至五个亿。想要解决这么大并发访问的场景，有多种的解决方案，常规有基于4层的，也有基于7层的。这个…
阅读更多...
ChatGPT提示语编写指南

ChatGPT提示语编写指南

ChatGPT AI 对话模型自 2022 年 11 月下旬开始可用，此后用户一直在探索聊天机器人的局限性和功能。 然而，OpenAI 也在不断地进行调整，因此 ChatGPT 处于不断变化的状态。 但是我们在这个小指南中描述的提示应该是永恒的。 要获得想要的结果&…
阅读更多...
SqlSession 和 SqlSessionTemplate 简单使用及注意事项

SqlSession 和 SqlSessionTemplate 简单使用及注意事项

1、SqlSession 简单使用 先简单说下 SqlSession 是什么？SqlSession 是对 Connection 的包装，简化对数据库操作。所以你获取到一个 SqlSession 就相当于获取到一个数据库连接，就可以对数据库进行操作。 SqlSession API 如下图示：…
阅读更多...
基于 CentOS7 的 KVM 部署 + 虚拟机创建

基于 CentOS7 的 KVM 部署 + 虚拟机创建

目录一、实验环境二、部署 KVM三、创建虚拟机四、远程管理 KVM 虚拟机FAQ一、实验环境 实验环境：VMware Workstation 16 Pro 打开虚拟机之前，首先开启 VMware Workstation Pro 16 上的硬件辅助虚拟化功能，如下图所示： 二、部署 …
阅读更多...
Spring Cloud Gateway集成Nacos实现负载均衡

Spring Cloud Gateway集成Nacos实现负载均衡

💡Nacas可以用于实现Spring Cloud Gateway中网关动态路由功能，也可以基于Nacos来实现对后端服务的负载均衡，前者利用Nacos配置中心功能，后者利用Nacos服务注册功能。接下来我们来看下Gateway集成Nacos实现负载均衡的架构图一. 环境…
阅读更多...
为什么现代企业发展离不开CRM系统的助力

为什么现代企业发展离不开CRM系统的助力

如今的CRM系统对于任何企业来说都重要，因为它能帮助企业收获新客户，保留现有客户，并且将不同部门的信息全部汇集，实时提供关于每位客户整体全面的看法。因此，销售、市场营销和客户支持等领域的客户直接服务员工能够做出…
阅读更多...
VHDL-延迟模型-惯性延迟与传输延迟

VHDL-延迟模型-惯性延迟与传输延迟

目录 1，惯性延时 2，传输延时 信号通过元件都会有延迟，延迟时间的计算是逻辑仿真的重要功能。考虑延迟信息得到的仿真输出波形可以更精确地反映实际电路的情况。针对元件的延时，人们根据需要建立了一些用的延时模型，这…
阅读更多...
集成电路相关书籍

集成电路相关书籍

注：从此开始，文中提到的书籍都会在公众号对应文章末尾给出链接，不需要在微信后台获取，当然还是可以通过在微信后台回复相关书名获取对应的电子书。 在后台看到很多人回复集成电路相关的一些书籍，所以本文就提供一些书籍…
阅读更多...
GD库图片裁剪指定形状解决办法（PHP GD库 海报）

GD库图片裁剪指定形状解决办法（PHP GD库 海报）

需求描述：需要把图片裁剪成一个指定的平行四边形，目的是使用GD库，把裁剪后的图片放在底图上面，使最终合成的图片看起来是一个底图平行四边形的样子提示：可以结合本作者的其他文章，来生成一个定制化的海报&a…
阅读更多...
【项目精选】基于Javaee的影视创作论坛的设计与实现（视频+论文+源码）

【项目精选】基于Javaee的影视创作论坛的设计与实现（视频+论文+源码）

点击下载源码 基于Javaee的影视创作论坛的设计与实现主要用功能包括： 首页推荐、用户管理、影片管理、评论管理、 预告片管理、海报管理、公告管理、数据检索、用户注册与登录等等功能、统结构如下 （1）后台管理: 管理模块：管理员…
阅读更多...
vscode编程小插件之Doxygen和Better Align

vscode编程小插件之Doxygen和Better Align

一、插件Doxygen:配置相应文件、函数说明项。 1、扩展商店，搜索Doxygen，如下图1，安装。 图1 2、设置项中，选择扩展设置，如图2 图2 3、配置版本、作者邮箱、作者名称、日期格式等等，如图3 4、定义函数后&…
阅读更多...
DM8:DMDSC共享存储集群搭建-实例初始化（待完成）

DM8:DMDSC共享存储集群搭建-实例初始化（待完成）

DM8:DMDSC共享存储集群搭建-实例初始化1 环境介绍2 使用 DMASMCMD 工具初始化磁盘3 各个节点先后分别启动 dmcss3.1 EP733.2 EP744 各个节点先后分别启动 dmasmsvr 程序4.1 EP734.2 EP745 使用 dmasmtool 工具创建 DMASM 磁盘组(在一个节点执行)6 使用 dminit 初始化 DB 实例环…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023