位置: IT常识 - 正文

webpack配置(webpack配置publicpath)

编辑:rootadmin
webpack配置 webpack前端工程化实际的前端开发

推荐整理分享webpack配置(webpack配置publicpath),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:webpack配置文件详解,webpack配置代理,webpack配置完全指南,webpack配置文件详解,webpack配置文件详解,webpack配置代理,webpack配置项有哪些,webpack配置项有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

模块化(js 的模块化、css 的模块化、资源的模块化)

组件化(复用已有的 UI 结构、样式、行为)

规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理)

自动化(自动化构建、自动部署、自动化测试)

何为前端工程化

前端工程化即,在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。这样有利于前端开发自成体系,有一套标准的开发方案和流程。

前端工程化解决方案

早期解决方案:

grunt

gulp

目前主流方案:

webpack

parcel

vite

webpack简介

webpack 是前端的打包工具

打包的工作内容是什么

扫描项目,生成整个项目所有模块的依赖关系,根据配置对模块进行合并,生成一个单独的文件。修改html文件,让html文件引用生成后的文件

将浏览器无法直接识别的(less、sass、ts)文件,转换成浏览器可以实现的内容。

将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法

webpack安装

webpack是基于node.js的,使用前需要安装node

-D 是 --save-dev 的缩写,表示开发时依赖,只在项目开发阶段用到。 -S 是 --save 的缩写,表示运行时依赖,即项目打包发布运行时要用到。

npm初始化

npm init -y

安装webpack

webpack内部还依赖webpack-cli,所以webpack-cli也要安装

npm install --save-dev webpack webpack-cliwebpack - 打包 js

配置

1.创建webpack配置文件 webpack.config.js

// 导入path模块const path = require('path')​// webpack配置module.exports = {    // 配置打包入口文件    entry: path.resolve(__dirname, 'src', 'index.js'),    // 配置打包输出位置,及文件名    output: {        path: path.resolve(__dirname, 'dist'),        // 输出文件名        filename: 'bundle.js'   }}

2.配置webpack执行命令

webpack需要npm来调用才可以执行,在package.json中的script中进行配置

"script":{   "dev":"webpack --config webpack.config.js"}​

经过以上配置,在控制台运行 npm run dev 命令执行 webpack对 js 文件进行打包

webpack - 打包模式

webpack有两种打包模式

development 开发模式

开发模式 :不会对打包生成的文件进行代码压缩和性能优化 打包速度快,适用于开发阶段使用

production 生产模式

生产模式: 会对打包生成的文件进行代码压缩和性能优化 打包速度很慢,仅适合在项目发布阶段使用不设置默认为production模式

配置

在webpack.config.js中添加一个mode配置项

// 导入path模块const path = require('path')​// webpack配置module.exports = {    // ---------------- 打包模式    mode: 'development',       /* // 配置打包入口文件   entry: path.resolve(__dirname, 'src', 'index.js'),   // 配置打包输出位置,及文件名   output: {       path: path.resolve(__dirname, 'dist'),       // 输出文件名       filename: 'bundle.js'     */   }}插件 - html-webpack-plugin

html-webpack-plugin插件可以在每次打包时都创建一个用于测试用的html文件

npm i --save-dev html-webpack-plugin

自定义模板配置webpack.config.js

在默认配置下创建的index.html文件的内容是由html-webpack-html自动生成的。里面除了引入了js外,边最基本的html结构都没有。

可以为html-webpack-html传入一个参数,让html-webpack-html插件,参照某个文件的内容生成html文件

// 导入path模块const path = require('path')​// 导入html-webpack-plugin插件const HtmlWebpackPlugin = require('html-webpack-plugin')​// webpack配置module.exports = {    // ...    // 插件配置    plugins:[        // ---------------- 传入配置参数        new HtmlWebpackPlugin({            // js插入位置            inject: 'body',            // 生成的html文件名            filename: 'index.html',            // 指定参照这个html文件进行生成            template: path.resolve(__dirname, './public/index.html')       })   ]​}webpack - 打包 css

目前为止,仅仅实现了对js文件的打包,这也是webpack默认的功能,还可以对他文件进行打包

打包css传送门

loader

webpack配置(webpack配置publicpath)

打包不同类型文件,要使用不同的loader,loader的作用:

1.读取文件内容。

2.对文件内容进行特定的处理。

下载 style-loader、css-loader

npm i style-loader css-loader --save-dev

配置

css-loader是将css代码从css文件中读取到内存中,而style-loader是将读取到的css代码设置到index.html文件的style标签内

// webpack配置module.exports = {    // ...        // 扩展文件加载模块 - css模块加    module: {        // 由于可以加载多种文件,每种文件对应一种loader,所以是数组        rules: [            // 由于是多种文件,所以使用扩展名进行区分,再应用不同的loader           {                // 正则判断文件类型                test: /\.css$/i,                // 这种类型文件使用以下loader                use: ['style-loader', 'css-loader'],           }       ]   }​}webpack - 打包 less

打包less传送门

下载 less-loader

npm i less-loader --save-dev

配置

// webpack配置module.exports = {    // ...        // 扩展文件加载模块 - css模块加    module: {        // 由于可以加载多种文件,每种文件对应一种loader,所以是数组        rules: [            // 由于是多种文件,所以使用扩展名进行区分,再应用不同的loader           {                // 正则判断文件类型                test: /\.css$/i,                // 这种类型文件使用以下loader                use: ['style-loader', 'css-loader'],           },           {                // 判断less文件                test: /\.less$/i,                // less使用到的loader,                use: [                    "style-loader",                    "css-loader",                    "less-loader"               ]           }       ]   }}webpack - 打包图片

在webpacke5.0中无需下载安装图片对应的loader(模块),因为内嵌了对象图片资源处理的模块,可以直接使用内置的资源模块进行处理(asset/modules) 内置了四种处理图片的资源模块

asset/resource

将图片文件单独打包成一个文件,保存到打包目录,再使用url(file:///d:/xxx/xxx) 就相当于将原图片,复制到了另个新的位置,改了名,url再指向新的位置即可。 之前是通过 file-loader 实现

asset/inline

将图片读取成base64格式,使用时通过url(data:image/png;base64,xxxxx)进行引用 之前是通过 url-loader 实现

asset/source

主要用于字体文件 通过 data:font/woff2;base64,xxxxxoxxox 之前是通过 raw-loader 实现

asset

在asset/resource 与 asset/inline之间自动选择,之前是通过url-loader,并配置资源体积限制实现。

配置

// webpack配置module.exports = {    // ...        // 扩展文件加载模块 - css模块加    module: {        // 由于可以加载多种文件,每种文件对应一种loader,所以是数组        rules: [            // 由于是多种文件,所以使用扩展名进行区分,再应用不同的loader           {                // 正则判断文件类型                test: /\.css$/i,                // 这种类型文件使用以下loader                use: ['style-loader', 'css-loader'],           },           {                // 判断less文件                test: /\.less$/i,                use: [                    "style-loader",                    "css-loader",                    "less-loader"               ]           },           {                // 加载图片资料模板                test: /\.(png|jpg|jpeg|gif|svg)$/,                type: 'asset/resource'           },           {                // 加载字体文件                test: /\.(eot|ttf|otf|woff2)$/,                type: 'asset'           }       ]   }}

测试

1.复制图片资源

创建文件夹 ./src/assets/imgs/ 复制图片到 imgs文件夹内

2.测试:在index.js文件中引入一个图片文件

./src/index.js

// 导入css文件import './assets/css/base.css'​// 导入less文件import './assets/less/index.less'​// 导入一个图片文件import timg from './assets/imgs/timg.png'// 获取页面图片,并设置src属性document.querySelector('.avatar').src = timg

3.测试:在css中设置一个背景图片

./src/assets/less/index.less

body {  // ...​  // .box 盒子  .box{    width: 400px;    height: 300px;    border:1px solid rgba(255,255,255,.5);    margin: 20px auto;    // 设置背景图片    background:url(../imgs/duitang.gif) 0 0/contain no-repeat; } ​}webpack - watch模式

目前为目,每次调整配置,都需要手动重新打包一次。

为了解决这个麻烦,webpack内置watch模块,通过配置可以实现自动打包。 传送门:使用watch模式

package.json配置

"script":{   "watch":"webpack --config webpack.config.js"}

通过npm run watch命令启动 watch 模式

但是这种方式仍然需要手动打开index.html页面,重新打包后,html 页面也不会自动刷新所以

我们会使用 webpack-dev-serve 这个插件来代替这种模式

插件 - webpack-dev-serve

通过webpack的watch模式,已经可以实现自动打包 ,但是这种方式并不完美所以我们将会使用webpack-dev-serve这个插件来代替 watch

下载

npm i --save-dev webpack-dev-server

webpack.config.js配置

// webpack配置module.exports = {    // ...        // webpack-dev-server配置    devServer: {        // 配置站点根目录,默认为输出位置        static: path.resolve(__dirname, 'dist'),        // 设置端口号        port: 8080,        // 自动打开浏览器,访问index.html        open: true   }}

package.json配置启动命令

"script":{   "serve":"webpack --config webpack.config.js"}

启动

npm run serveHMR

webpack-dev-server,还会附带了一个很有用的功能,HMR(hot module replacement) 传送门:模块热替换 在程序运行的过程(不重新启动服务器),动态的添加,替换删除某个模块,而无需重新加载整个页面。 例如:index.less内容修改了,只对这个less模块重新加载,不影响其他模块

// webpack配置module.exports = {    // ...        // webpack-dev-server配置    devServer: {        // 配置站点根目录,默认为输出位置        static: path.resolve(__dirname, 'dist'),        // 设置端口号        port: 4201,        // 自动打开浏览器,访问index.html        open: true,        // 热替换配置,true启用,false禁用,默认为true                ---------在这---------        hot: true   }​}webpack - 打包生产代码

当一个项目开发完毕后,要对项目的代码进行最终的打包,最终的打包,要以production模式进行。

可以修改webpack.config.js中的mode:'production'

// webpack配置module.exports = {    // 打包模式    // 生产环境打包模式    mode: 'production',}

(推荐)也可以在package.json的 script 中配置打包命令,通过--mode=production来指定

"build":{   "serve":"webpack --config webpack.config.js --mode=production"}

打包命令

npm run buildsource map

打包后的代码与原代码的所在的文件名,位置都不相同了,如果出错,可能会很难追踪到错误和警告在源代码中的原始位置。可以使用source map,source map可以将错误在源代码中的显示给我们。只在开发阶段使用,上线一定要移除

// webpack配置module.exports = {    // 配置source-map    devtool: 'source-map',        // ...}

注意

生产环境打包之前一定要移除,不然就会被坏人看到代码喽!!!

本文链接地址:https://www.jiuchutong.com/zhishi/299484.html 转载请保留说明!

上一篇:vue如何请求后端数据(vue请求后端接口)

下一篇:seaborn库学习----分布图displot、histplot、kdeplot、ecdfplot(seaborn库的特点)

  • 利用淘宝帮派活动推广淘宝店(淘宝帮派属于免费流量吗)

    利用淘宝帮派活动推广淘宝店(淘宝帮派属于免费流量吗)

  • 不干扰不过载,你的APP消息推送也能打动用户!(互不干扰)

    不干扰不过载,你的APP消息推送也能打动用户!(互不干扰)

  • 微信状态怎么设置30秒(微信状态怎么设置音乐)

    微信状态怎么设置30秒(微信状态怎么设置音乐)

  • 苹果x来电声音刚开始大后来小(苹果X来电声音怎么调)

    苹果x来电声音刚开始大后来小(苹果X来电声音怎么调)

  • 熊猫直播为什么要关闭(熊猫直播为什么不能下载了)

    熊猫直播为什么要关闭(熊猫直播为什么不能下载了)

  • 双卡手机怎么设置用哪个卡打电话(双卡手机怎么设置)

    双卡手机怎么设置用哪个卡打电话(双卡手机怎么设置)

  • 电脑只有两个盘怎么加(电脑只有两个盘不够用)

    电脑只有两个盘怎么加(电脑只有两个盘不够用)

  • 微信点赞不让共同好友看到(微信点赞不让共同好友看到华为)

    微信点赞不让共同好友看到(微信点赞不让共同好友看到华为)

  • 微信密码错误会被锁多久能解除(微信密码错误会被锁多久)

    微信密码错误会被锁多久能解除(微信密码错误会被锁多久)

  • qq扩列为啥这么多的机器人(qq扩列为啥这么多小妹妹)

    qq扩列为啥这么多的机器人(qq扩列为啥这么多小妹妹)

  • 华为手机有给联系人定位功能吗(华为手机给联系人加头像)

    华为手机有给联系人定位功能吗(华为手机给联系人加头像)

  • 苹果手机蓝牙已经连接了为什么没有音乐(苹果手机蓝牙已打开为什么用不了)

    苹果手机蓝牙已经连接了为什么没有音乐(苹果手机蓝牙已打开为什么用不了)

  • 美团的评价为什么不显示不出来(美团的评价为什么会被折叠呢)

    美团的评价为什么不显示不出来(美团的评价为什么会被折叠呢)

  • 有什么软件可以打电话(有什么软件可以识别图片的文字)

    有什么软件可以打电话(有什么软件可以识别图片的文字)

  • iphone怎么开手套模式(苹果手机怎么样打开手套模式)

    iphone怎么开手套模式(苹果手机怎么样打开手套模式)

  • word序号重新编号(word序号如何重新排序)

    word序号重新编号(word序号如何重新排序)

  • vue调整字幕位置(vue里字幕怎么调整大字时间)

    vue调整字幕位置(vue里字幕怎么调整大字时间)

  • 发的抖音怎么再次编辑(发的抖音怎么再编辑视频)

    发的抖音怎么再次编辑(发的抖音怎么再编辑视频)

  • 在哪里看淘宝几颗星(在哪里看淘宝几年了)

    在哪里看淘宝几颗星(在哪里看淘宝几年了)

  • word文档目录怎么增加一行(word文档目录怎么添加)

    word文档目录怎么增加一行(word文档目录怎么添加)

  • word中的表格属性在哪(word中的表格属性在哪里设置)

    word中的表格属性在哪(word中的表格属性在哪里设置)

  • Flash动画中如何导入音乐(flash动画如何保存成swf格式)

    Flash动画中如何导入音乐(flash动画如何保存成swf格式)

  • iphone怎么在网站下载电影(苹果手机上的网站)

    iphone怎么在网站下载电影(苹果手机上的网站)

  • 华为P30怎么取消华为视频自动续费(华为p30怎么取消免打扰模式)

    华为P30怎么取消华为视频自动续费(华为p30怎么取消免打扰模式)

  • 微信悬浮窗口怎么设置(微信悬浮窗口怎么调节大小)

    微信悬浮窗口怎么设置(微信悬浮窗口怎么调节大小)

  • 系统理论的主要内容(系统理论的主要内容包括(ABC )三个方面)

    系统理论的主要内容(系统理论的主要内容包括(ABC )三个方面)

  • 主板内部外部接口图解(主板外部接口是用来连接)

    主板内部外部接口图解(主板外部接口是用来连接)

  • 视同内销增值税怎么申报
  • 彩票税率税率
  • 股权转让给个人和公司的区别
  • 注册资本为0的企业
  • 记账凭证如何填写明细科目
  • 应付职工薪酬工资贷方有余额要怎么调整
  • 销售商品,提供服务以及从事其他经营活动
  • 会计差错更正流程
  • 年未决算的现金利润怎么算
  • 购入材料用于非增值税纳税项目
  • 事业单位结余如何分配
  • 财产租赁合同印花税计税依据含税吗
  • 注册资本金应该编入政府性基金预算吗
  • 企业所得税工资薪金和个税申报里一致么
  • 营改增怎么还有机打发票吗
  • 收到雇主责任险发票计入什么科目
  • 公司接受安全罚款的账务处理
  • 抵扣联和发票联算一张发票吗
  • 小规模企业需要汇算清缴吗
  • 一般纳税人企业所得税如何计算
  • 收到购货方退回的发票联和抵扣联如何处理?
  • 生产销售部门职责
  • win7系统内存不足怎么解决
  • 技术合同指什么
  • 母公司给子公司拨款要交税吗
  • 固定资产原值减少说明什么
  • php删除用户
  • php-msf
  • php数组函数大全
  • 增资导致的股权稀释涉税吗
  • 油猴脚本插件官网
  • framework3.5怎么打开
  • 白 犀牛
  • 半球形的谢尔亨里克森天文台,挪威斯瓦尔巴群岛 (© Vincent Fournier/Gallery Stock)
  • php autoload用法
  • 企业所得税是地税申报还是国税申报
  • phpemail正则
  • smarty怎么用
  • 黄石国家公园的英文翻译
  • 重置java
  • uniapp获取手机通讯录
  • php类的定义
  • jquery+thinkphp实现跨域抓取数据的方法
  • 如何让别人访问自己的qq空间
  • 未达起征点怎么填申报表
  • 代发工资范围
  • 年终奖要计入工资吗
  • 其他应收款的会计分录有哪些
  • 原材料入库单价20000出库单价800000
  • 社保减免财务账务处理
  • 小规模公司累计增值税
  • 内部审计和外部审计可以相互接触对方的
  • 固定资产一次性扣除怎么做账
  • 其他综合收益转到留存收益
  • 未使用的固定资产计提折旧计入什么科目
  • 赔偿金是营业外收入吗
  • 盘亏存货可以转回来吗
  • 现金劳务收入会计分录
  • 未分配利润属于总账科目吗
  • 工程结算与开票的关系
  • 最新版日历
  • win2003怎么安装
  • 硬盘安装windows11
  • win10 server2008
  • win108080端口怎么打开
  • linux安装软件可以用哪些方式
  • win7系统鼠标右键菜单设置
  • mac safari浏览器网页不能正常显示
  • kavsvc.exe - kavsvc是什么进程 有什么作用
  • linux关闭系统
  • linux系统有哪几个
  • shell中的循环语句有哪些
  • jquery和css的区别
  • python常见算法
  • 开源安卓app
  • nginx 执行shell
  • js面向接口编程
  • 出口发票与报关单名称不一致影响退税吗
  • 河北省十大杰出五四青年
  • 为什么非贸易付不了款呢
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设