webpack — 概述介绍

webpack概述

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web 开发中所面临的困境。

webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高开发效率和项目的可维护性。

目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。
在这里插入图片描述

webpack的基本使用

一.创建列表隔行变色项目

  1. 新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json

  2. 新建 src 源代码目录

  3. 新建 src -> index.html 首页

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script>
</head>
<body><input type="text" placeholder="测试"><ul><li>第1个li</li><li>第2个li</li><li>第3个li</li><li>第4个li</li><li>第5个li</li><li>第6个li</li><li>第7个li</li><li>第8个li</li><li>第9个li</li></ul><div id="box"></div><hr/><!-- 将来要被 vue 控制的区域 --><div id="app"></div>
</body>
</html>

  4. 初始化首页基本的结构

  5. 运行 npm install jquery -s 命令，安装 jQuery

  6. 通过模块化的形式，实现列表的隔行变色效果

    import $ from 'jquery'$(function () {$('li:odd').css('backgroundColor', 'blue')$('li:even').css('backgroundColor', 'lightblue')
})

二，在项目中安装和配置webpack

  1. 运行 npm install webpack webpack-cli -D命令，安装 webpack 相关的包

  2. 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件

  3. 在 webpack 的配置文件中， 初始化如下基本配置：

    module.exports = {// 编译模式mode:'development' ,  //mode 用来指定构建模式//development 属于不压缩模式，建议在开发时使用//production  属于压缩模式，建议在发布的时候使用
}

  4. 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

    "scripts": { "dev": "webpack"  //script 节点下的脚本，可以通过 npm run 执行}

  5. 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

在这里插入图片描述

三、配置打包的入口和出口

webpack 的 4.x 版本中默认约定：

  • 打包的入口文件为 src -> index.js
  • 打包的出口文件为 dist -> main.js

如果要修改打包的出口与入口，可以在 webpack.config.js 中新增如下配置信息：

// 文件路径查询
const path = require('path');module.exports = {.........// 打包的入口 //输入文件的路径entry:path.join(__dirname,'./src/index.js'),// 打包的出口 output:{//输出文件的路径path:path.join(__dirname,'./dist'),// 输出文件自定的名称filename:'bundle.js'},

四、配置webpack 的自动打包功能

  1. 运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具

  2. 修改 package.json —> scripts 中的 dev 命令如下：

    "scripts": { "dev": "webpack-dev-server"  //script 节点下的脚本，可以通过 npm run 执行
},

  3. 将 src -> index.html 中，script 脚本的引用路径 ，修改为 “/buldle.js”

  4. 运行 npm run dev 命令，重新进行打包

  5. 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

    ​ 注意：

    ​ webpack-dev-server 会启动一个实时打包的 http 服务器

五、配置 html-webpack-plugin 生成预览页面

  1. 运行 npm install html-webpack-plugin -D 命令，安装生成预览页面的插件

  2. 修改 webpack.config.js 文件头部区域，添加如下配置信息：

    // 导入生成浏览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({template :'./src/index.html' , //指定要用到的模板文件filename:'index.html' //指定生成文件的名称，该文件存在与内存中，在目录中不显示
})

  3. 修改 webpack.config.js 文件中向外暴露的配置文件，新增如下配置节点：

    module.exports = {    plugins:[htmlPlugin] //plugins 数组是webpack 打包期间会用到的一些插件列表
}

六、配置自动打包相关的参数

// --open 打包完成后自动打开浏览器页面 
// --host 配置IP地址
// --port 配置端口
"scripts": {"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

webpack中的加载器

1、通过 loader 打包非 js 模块**

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块， 其他非 .js后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

  • less-loader 可以打包处理 .less 相关的文件
  • sass-loader 可以打包处理 .scss 相关的文件
  • url-loader 可以打包处理 .css 中与 url 路径相关的文件

2、loader 的调用过程**

在这里插入图片描述

webpack中加载器的基本使用

一、打包处理css 文件

  1. 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader

  2. 在 webpack.config.js 的module -> rules 数组中，添加 loader 规则如下：

     //所有第三方文件模块的匹配规则module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},]}

    其中， test 表示匹配的文件类型，use 表示对应要调用的 loader

    注意：

    • use 数组中指定的 loader 顺序是固定的
    • 多个 loader 的调用顺序是： 从后往前调用

二、打包处理less文件

  1. 运行 npm i less-loader less -D 命令.
  2. 在 webpack.config.js 的module -> rules 数组中，添加 loader 规则如下：
    module:{rules:[.....{test:/\.less$/,use:['style-loader','css-loader','less-loader']},]}

三、打包处理scss文件

  1. 运行 npm i sass-loader node-sass -D 命令.
  2. 在 webpack.config.js 的module -> rules 数组中，添加 loader 规则如下：
    module:{rules:[......{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]}

四、配置 postCSS 自动添加 css 的兼容前缀

  1. 运行 npm i postcss-loader autoprefixer -D 命令.

  2. 在项目的根目录中创建 postcss 的配置文件 postcss.config.js , 并初始化如下配置：

    const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件
module.exports = {plugins:[autoprefixer]  //挂载插件
}

  3. 在 webpack.config.js 的module -> rules 数组中，修改 css 的 loader 规则如下：

    module:{rules:[{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}]}

五、打包样式表中的图片和字体文件

  1. 运行 npm i url-loader file-loader -D 命令.
  2. 在 webpack.config.js 的module -> rules 数组中，添加 loader 规则如下：
 module:{rules:[......{test:/\.jpg|png|gif|hmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=41698'},]}

其中 ？ 之后的是 loader 的参数项

limit 用来指定图片的大小，单位是字节（byte），只有小于 limit 大小的图片，才会被转为 base64图片

六、打包处理 js 文件中的高级语法

  1. 安装 bable转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
  2. 安装 bable语法插件相关的包： npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  3. 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：
module.exports = {presets:['@babel/preset-env'],plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
  1. 在 webpack.config.js 的module -> rules 数组中，添加 loader 规则如下：
 module:{rules:[......{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},]}

Vue 单文件组件

一、Vue 单文件组件的基本用法（组成结构）

  • ​ template 组件的模块区域
  • ​ script 业务逻辑区域
  • ​ style 样式区域
<template>
<!-- 这里用于定义Vue组件的模板内容 --><div><h1>这是 App 根组件</h1></div>
</template><script>
// 向外输出的函数及事件
export default {data() {return {} },  //私有数据methods: {}  //处理函数// ....其它业务逻辑};
</script><style scoped>
/* scoped 是为了防止样式的冲突问题 */
/* 定义当前文件中的内容样式 */
h1{color: red;
}
</style>

二、webpack 中配置 vue 组件的加载器

  1. 运行 npm i vue-loader vue-template-compiler -D 命令.
  2. 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：
// 后缀名为 vue 的文件组件加载器添加
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {module:{rules:[//......其他规则{test:/\.vue$/,use:'vue-loader'}]},plugins:[//...... 其他插件new VueLoaderPlugin()   //请确保引入这个插件]
}

三、在webpack 项目中使用 vue

  1. 运行 npm i vue -s 安装 vue
  2. 在 src -> index.js 入口文件中，通过 import Vue from ‘vue’ 来导入 vue 构造函数
  3. 创建 vue 的实例对象， 并指定要控制的 el 区域
  4. 通过 render 函数渲染 App 根组件
//1.导入 Vue 构造函数
import Vue from 'vue'
//2. 导入App 根组件
import App from './components/App.vue'const vm = new Vue({//3. 指定vm 实例要控制的页面区域el: '#app',//4. 通过render 函数，把指定的组件渲染到 el 区域中render: h => h(App)
}) //.$mount('#app')

四、webpack打包发布

上线之前需要通过 webpack 将应用进行整体打包，可以通过package.json 文件配置打包命令：

//在package.json文件中配置 webpack 打包命令
//该命令默认加载项目根目录中的 webpack.config.js 配置文件"scripts": { //用于开发调式的命令"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",//用于打包的命令"build":"webpack -p"},

注意：

​ 最后在文件的端口下实行的命令为

npm  run  build

r: h => h(App)
}) //.$mount(’#app’)


### 四、webpack打包发布上线之前需要通过 webpack 将应用进行整体打包，可以通过package.json 文件配置打包命令：```js
//在package.json文件中配置 webpack 打包命令
//该命令默认加载项目根目录中的 webpack.config.js 配置文件"scripts": { //用于开发调式的命令"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",//用于打包的命令"build":"webpack -p"},

注意：

​ 最后在文件的端口下实行的命令为

npm  run  build

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

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

相关文章

彻底解决iOS项目中 _OBJC_CLASS_$_XXXService, referenced from: 的类似问题

彻底解决iOS项目中 _OBJC_CLASS_$_XXXService, referenced from: 的类似问题

这是大家熟悉的开发过程中可能遇到的问题 这是提交源码到appStore不支持64位设备的提示 本人在提交项目到appStore时发生的的错误&#xff0c;提示必须要支持64的设备&#xff0c;然后自己赶紧进行相关的适应&#xff0c;出现了类似标题的问题&#xff0c;解决方法如下: 1、…
阅读更多...
THUPCCTSAPIO2019：Far Away

THUPCCTSAPIO2019：Far Away

流水账~ THUPC nmdwsmduliu&#xff01; THUPC Day -INF~Day -2 大概就是自己做题和每周两次的考试&#xff0c;lsy和fcw两个外校的来吊打我们qwqqq THUPC Day -1 Z208 长沙->北京 在车上看gzy/tjj/xzz打摆&#xff1f; THUPC Day 0 从火车站出来做地铁的时候和tjj做反了可海…
阅读更多...
UIDocumentInteractionController之程序间文档共享

UIDocumentInteractionController之程序间文档共享

iOS中的沙盒可以让平台更加的安全&#xff0c;这也是沙盒给用户带来的最主要好处。不过由于沙盒的严格限制&#xff0c;导致程序之间共享数据比较麻烦。一般在程序间共享文档可以通过UIDocumentInteractionController类实现通讯。它支持在你的app中用其他app预览和显示文档。同…
阅读更多...
c#基础知识梳理（四）

c#基础知识梳理（四）

上期回顾 - https://www.cnblogs.com/liu-jinxin/p/10826971.html 一、类 当你定义一个类时&#xff0c;你定义了一个数据类型的蓝图。这实际上并没有定义任何的数据&#xff0c;但它定义了类的名称意味着什么&#xff0c;也就是说&#xff0c;类的对象由什么组成及在这个对象…
阅读更多...
UIButton设置圆角和边框及边框颜色

UIButton设置圆角和边框及边框颜色

UIButton *testButton [UIButton buttonWithType:UIButtonTypeSystem];[testButton setFrame:CGRectMake(self.view.frame.size.width/2, self.view.frame.size.height/2, 100,100)];[testButton setTitle:"获取屏幕尺寸" forState:UIControlStateNormal];[testButt…
阅读更多...
Objective-C 深复制和浅复制与NSCopying协议

Objective-C 深复制和浅复制与NSCopying协议

1.简单复制只能实现浅拷贝&#xff1a;指针赋值&#xff0c;使两个指针指向相同的一块内存空间&#xff0c;操作不安全。 2. Foundation类已经遵守了<NSCopying>和 <NSMutableCopying>协议,即实现了copy和mutableCopy方法,因此Foundation对象可以使用这些方法创建对…
阅读更多...
NSTimer 进阶使用总结与注意事项

NSTimer 进阶使用总结与注意事项

NSTimer 是 iOS 上的一种计时器&#xff0c;通过 NSTimer 对象&#xff0c;可以指定时间间隔&#xff0c;向一个对象发送消息。NSTimer 是比较常用的工具&#xff0c;比如用来定时更新界面&#xff0c;定时发送请求等等。但是在使用过程中&#xff0c;有很多需要注意的地方&…
阅读更多...
一步一步教你实现iOS音频频谱动画（一）

一步一步教你实现iOS音频频谱动画（一）

如果你想先看看最终效果再决定看不看文章 -> bilibili示例代码下载 第二篇&#xff1a;一步一步教你实现iOS音频频谱动画&#xff08;二&#xff09; 基于篇幅考虑&#xff0c;本次教程分为两篇文章&#xff0c;本篇文章主要讲述音频播放和频谱数据的获取&#xff0c;下篇将…
阅读更多...
微信小程序的基础 （一）

微信小程序的基础 （一）

微信小程序介绍- 链接 微信小程序&#xff0c;简称小程序&#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”的梦想&#xff0c;用户扫一扫或搜一下即可打开应用 1. 为什么是微信小程序? 微信有海量用户&#xff0c;而且粘性很高&#x…
阅读更多...
IDEA提交项目到SVN

IDEA提交项目到SVN

一.提交步骤 VCS--Enable...-->点击项目右键-->subversion-->share directory-->commit 二.IDEA SVN 忽略文件的设置 1》share .使用idea在将项目提交到svn的过程中遇到这样的问题 将项目share之后再设置ignore files &#xff0c;在commit的时候&#xff0c;不会将…
阅读更多...
项目ITP(五) spring4.0 整合 Quartz 实现任务调度

项目ITP(五) spring4.0 整合 Quartz 实现任务调度

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主同意不得转载。https://blog.csdn.net/u010378410/article/details/26016025 2014-05-16 22:51 by Jeff Li 前言 系列文章&#xff1a;[传送门] 项目需求&#xff1a; 二维码推送到一体机上&#xff0c;给学生签到扫…
阅读更多...
喜欢用Block的值得注意-Block的Retain Cycle的解决方法

喜欢用Block的值得注意-Block的Retain Cycle的解决方法

本文不讲block如何声明及使用&#xff0c;只讲block在使用过程中暂时遇到及带来的隐性危险。 主要基于两点进行演示&#xff1a; 1.block 的循环引用(retain cycle) 2.去除block产生的告警时&#xff0c;需注意问题。 有一次&#xff0c;朋友问我当一个对象中的block块中的访问…
阅读更多...
【PyQt5】QT designer + eclipse 集成开发

【PyQt5】QT designer + eclipse 集成开发

【写在前面的话】 考虑将pyqt5的界面开发qt designer 集成在eclipse中&#xff0c;并且&#xff0c;不利用cmd命令行进行转换。 【工具】 1、pyqt5 2、qt designer 3、eclipse pydy 【步骤】 1、首先配置Qt designer。 菜单 run-->external Tools-->External tools confi…
阅读更多...
iOS UIlabel文字排版（改变字间距行间距）分类

iOS UIlabel文字排版（改变字间距行间距）分类

在iOS开发中经常会用到UIlabel来展示一些文字性的内容&#xff0c;但是默认的文字排版会觉得有些挤&#xff0c;为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节。 比如一个Label的默认间距效果是这样&#xff1a; 然后用一个封装起来的Cat…
阅读更多...
iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

问题一 开发过程中&#xff0c;经常会遇到动态计算行高的问题&#xff0c; - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingC…
阅读更多...
线程模块

线程模块

信号量 from threading import Semaphore,Thread import timedef func(a,b):time.sleep(1)sem.acquire()print(ab)sem.release()sem Semaphore(4) for i in range(10):t Thread(targetfunc,args(i,i5))t.start() 信号量事件 # 事件被创建的时候&#xff0c;默认为False状态 #…
阅读更多...
React中级学习（第一天）

React中级学习（第一天）

Props深入 children 作用 : 获取组件标签的 子节点获取方式 : this.props.children <App>此处的内容&#xff0c;就是组件的 children&#xff0c;将来通过组件的 props.children 就可以获取到这些子节点了 </App>props 校验 作用&#xff1a;规定组件props的类…
阅读更多...
Elasticsearch集成ik分词器

Elasticsearch集成ik分词器

1、插件地址https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v7.0.0/elasticsearch-analysis-ik-7.0.0.zip 2、找到对应版本的插件通过 http://192.168.1.8:9200查看ES的版本&#xff0c;找到对应的IK分词插件 下载与之对应的版本https://github.com/me…
阅读更多...
iOS NSTextAttachment - 图文混排

iOS NSTextAttachment - 图文混排

苹果在iOS7中推出了一个新的类NSTextAttachment&#xff0c;它是做图文混排的利器&#xff0c;本文就是用这个类&#xff0c;只用50行代码实现文字与表情混排&#xff0c;当然也可以实现段落中的图文混排。 首先说一下文字和表情的混排&#xff1a; 先来做点儿准备工作&#…
阅读更多...
iOS 自定义Cell按钮的点击代理事件

iOS 自定义Cell按钮的点击代理事件

在实际开发工作中&#xff0c;我们经常会在自定义的Cell中布局一些按钮&#xff0c;并且很多时候我们会在点击这个按钮的时候使我们的UItableviewController跳转到下一界面&#xff0c;有的可能还要传值。那么如何使我们的控制器能够获知我们按下了cell的按钮呢&#xff1f;毫无…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023