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预览和显示文档。同…
阅读更多...
webpack — 概述 （2）

webpack — 概述 （2）

webpack学前必备 webpack中文网 webpack官网 1. Webpack 介绍 Webpack 是什么?? (面试) 前端模块化打包工具WebPack可以看做是模块打包机&#xff1a;它做的事情是&#xff0c;分析你的项目结构&#xff0c;找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言…
阅读更多...
VUE安装依赖命令总结

VUE安装依赖命令总结

以下是个人用到过的vue安装包以及依赖命令&#xff08;在接触项目时&#xff0c;有未写到的会随时补充&#xff09; 1. vuex 作用&#xff1a;vue状态管理 安装&#xff1a;npm install vuex --save 开源地址&#xff1a;github 文档&#xff1a;https://vuex.vuejs.org/zh/ 2.…
阅读更多...
SQL总结(快速参考)

SQL总结(快速参考)

SQL 语句 语句 语法 AND / OR SELECT column_name(s) FROM table_name WHERE condition AND|OR condition ALTER TABLE (add column) ALTER TABLE table_name ADD column_name datatype ALTER TABLE (drop column) ALTER TABLE table_name DROP COLUMN column_name AS (alias…
阅读更多...
Vue -项目创建（rem适配项的设置）

Vue -项目创建（rem适配项的设置）

3. 项目rem 配置 ####3.1 rem介绍 小米、京东、携程 m.mi.com/m.jd.com/m.ctrp.com 核心原理 1rem 当前 html 的fontSize也就是说 : rem是相当于根元素的字体大小// 使用div {width:2rem;height:2rem}// 媒体查询media (min-width:320px) {html {font-size : 20px}}media (mi…
阅读更多...
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…
阅读更多...
Git 的介绍简介

Git 的介绍简介

使用 git 管理我们的项目并上传到码云 ##1. 本地管理 本地工作区 git add >暂存区 git commit > 仓库区 git status : 查看我们的状态 查看到很多红色的 (有修改的 有删除的 有添加的) git add . : 把当前所有文件添加到暂存区 git commit -m xxx 把代码从暂存区 提交…
阅读更多...
【王俊杰de人工智能实战课】第7次作业2

【王俊杰de人工智能实战课】第7次作业2

Brief Guide 项目内容这个作业属于哪个课程北航人工智能实战课这个作业的要求在哪里第三次作业要求我在这个课程的目标是获得机器学习相关的完整项目与学习经验&#xff1b;通过与人工智能行业的大牛们聊天了解行业不同方向的发展以便进行职业规划&#xff1b;为转CS积累基础知…
阅读更多...
让UITableView的section header view不悬停的方法

让UITableView的section header view不悬停的方法

当 UITableView 的 style 属性设置为 Plain 时&#xff0c;这个tableview的section header在滚动时会默认悬停在界面顶端。取消这一特性的方法有两种&#xff1a; 将 style 设置为 Grouped 。这时所有的section header都会随着scrollview滚动了。不过 grouped 和 plain 的样式…
阅读更多...
Promise 的基本使用 与 Ajax的jQuery封装

Promise 的基本使用 与 Ajax的jQuery封装

Promise 的基本使用 为了解决回调地狱问题&#xff0c;从而给出的解决办法&#xff1a; /*** Promise** 1. Promise 是 一个构造函数 new Vue()* 2. Promise() 里面有个参数, 参数就是一个回调 () > {}* 回调也有参数* resolve f 操作成功的时候调用resolve > …
阅读更多...
个人冲刺9

个人冲刺9

1.昨天做了界面整体优化。 2.今天打算了解一下组成员的情况。 3.整体界面优化没有什么问题。转载于:https://www.cnblogs.com/Evak/p/10936840.html
阅读更多...
iOS UITextField使用全攻略

iOS UITextField使用全攻略

//初始化textfield并设置位置及大小 UITextField *text [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式&#xff0c;只有设置了才会显示边框样式 text.borderStyle UITextBorderStyleRoundedRect; typedef enum { UITextBorderStyleNone…
阅读更多...
日期模糊查询

日期模糊查询

SELECT * FROM 表名 t WHERE(to_char(t.日期字段,yyyy-MM-dd hh24:mi:ss)like %2011%)转载于:https://www.cnblogs.com/macT/p/10865206.html
阅读更多...
Uboot中start.S源码的指令级的详尽解析（转）

Uboot中start.S源码的指令级的详尽解析（转）

Uboot中start.S源码的指令级的详尽解析转载于:https://www.cnblogs.com/LittleTiger/p/10877516.html
阅读更多...
Vuex说明及Todos项目改造

Vuex说明及Todos项目改造

Vuex(vue) / Flux (angular) /Redux(react) vuex 是什么? 状态管理工具 状态即数据, 状态管理就是管理组件中的data数据 Vuex 中的状态管理工具,采用了 集中式 方式统一管理项目中组件之间需要通讯的数据 [看图] 如何使用 最佳实践 : 只将组件之间共享的数据放在 vuex …
阅读更多...
Objective-C 深复制和浅复制与NSCopying协议

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

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

基于Vue项目打包上线配置

打包上线 开发阶段 : npm run serve发布阶段 : npm run build build之前 1. 把基准地址, 由开发阶段的换成发布阶段的 //main.js axios.defaults.baseURL http://localhost:30002. 忽略项目中打印的结果 // main.js console.log () > {}// 开发阶段 > 注释掉 >…
阅读更多...
最新文章

Copyright @ 2022~2023