webpack_webpack csdn-程序员宅基地

技术标签: webpack  

webpack

1. webpack

1.1 静态资源多了带来的问题

  • 网页加载速度慢, 因为 我们要发起很多的二次请求
  • 要处理错综复杂的依赖关系

1.2 如何解决上述问题

  • 合并、压缩、精灵图、图片的Base64编码
  • 可以使用webpack解决各个包之间的复杂依赖关系

2. webpack的使用

2.1 webpack的安装

  • 全局安装运行npm i webpack -g这样就可以在全局使用webpack的命令了
  • 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

官方建议我们安装在项目的目录下

**备注:**在webpack4之后的版本,不光需要安装webpack还需要安装webpack-cli

2.2 webpack的使用

2.2.1 项目搭建思路
  1. 搭建项目的目录结构

  2. 使用npm init构建项目,使用package.json管理项目

  3. 安装jquery插件

  4. 不在页面中引入jquery而是在main.js中引用jquery(使用es6高阶语法),这样做可以减少请求次数

  5. 编写js脚本

  6. 浏览器不认识es6的高级语法,所以使用webpack打包js文件,将这个js文件转化成浏览器可以认识的文件.

    1. 安装webpack npm i webpack -D
    2. 安装webpack-cli npm i webpack-cli -D
    3. 执行打包命令, webpack 【需要打包的文件】 -o 【``输出的文件``】
    4. 因为webpack不是全局安装所以没有办法在命令行中直接执行webpack命令,这里可以借助npm提供的npx命令执行webpack命令 npx webpack 【需要打包的文件】 -o 【``输出的文件``】
  7. 在html中引入打包好的js文件

npx 可以执行项目已经安装的可执行工具

2.2.2 webpack的作用
  1. 处理了js的依赖关系,对js做了合并。
  2. 让浏览器不识别的高级语法,转换成浏览器可以识别的语法。

2.3 webpack的配置文件webpack.config.js

  1. 默认配置的入口文件是src目录。我们在src根目录下添加index.js,就会默认打包这个index.js文件
  2. 默认出口文件在dist目录下生成main.js

2.4 自定义配置文件

  1. 创建webpack.config.js的文件,放在项目的根目录

  2. 配置入口和出口,配置放在module.exports导出的对象里

    1. 入口entry,配置这个时候后面写的是路径,这里用到的是node提供的path的api进行路径的拼接

    2. 出口output

      path

      filename

// webpack的配置文件
const path = require('path');

// 使用path提供的方法拼接路径
// /src/ ,/src , index.js. /index.js
// /src//index.js
// /src/index.js

module.exports = {
    
    entry: path.join(__dirname, 'src/main.js'),
    output: {
    
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
  1. 之后直接运行webpack即可打包

    在node里__dirname是这个js的当前路径

2.5 执行webpack之后发生了什么

  1. 它会去项目的根目录里找webpack.config.js配置文件,如果没找到会使用默认的配置文件,这个默认的配置文件是在webpack4之后才有的。默认的入口是src/index.js,默认的出口是dist/main.js。
  2. 回去找到配置文件配置的入口entry和出口output。
  3. 执行webpack的打包命令,将入口文件转化成出口文件

2.6 配置多个入口

应用场景:

  1. 业务代码和第三方代码分离。

  2. 多模块懒加载

    1. 业务场景:在单页面应用中,如果不做懒加载首页加载时,会把所有的js都加载出来,导致首页加载过慢
    2. 解决: 加载首页的只加载首页的js,用到哪个模块就加在那个模块的js

如何配置:

  1. entry之前是单个的地址,只能对应一个文件,entry可以配置成一个对象,对象的key就打包的入口文件起的名字,value是文件对应的地址。
  2. output的filename改为**[name].js** ,这里[name]指向就是配置的key的名字。
module.exports = {
    
    entry: {
    
        bundle: path.join(__dirname, 'src/main.js'),
        index: path.join(__dirname, 'src/index.js')
    },
    output: {
    
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }
}

3. 使用webpack-dev-server插件启动页面

每次修改之后都要重新打包,之后刷新页面,操作很繁琐,使用webpack-dev-server就可以解决这个问题,实时预览。

3.1 如何使用

  1. 安装webpack-dev-server依赖 npm i webpack-dev-server -D

  2. 运行这个命令启动服务

    1. 通过npx运行脚本npx webpack-dev-server
    2. 配置package.json脚本
      1. 配置之后通过npm run 【配置的名字】就可以启动
  "scripts": {
    
    "dev": "webpack-dev-server",
  },

3.2 执行这个webpack-dev-server发生了什么

  1. 启动了一个服务,这个服务默认启动在8080端口

  2. 执行webpack命令,把输出的内容放在了内存里,我们直接通过localhost:8080/【输出的文件名】就可以访问到这个文件。

    1. 为什么要放在内存里:我们文件一保存就会进行打包编译,会频繁涉及到文件的读写,内存的读写效率要比硬盘高很多,所以放在内存里。
  3. 我们一修改入口文件,就会执行打包命令,界面就会进行刷新

3.3 实现自动打开浏览器以及热更新

  1. 通过命令行指定参数的方式实现webpack-dev-server --open --port 3000 --contentBase src --hot注意参数之间都有空格

    1. open 打开浏览器
    2. port 服务端口号
    3. contentBase 默认的界面
    4. hot 热部署,每次修改js文件只会打包修改的地方,提高效率,浏览器不刷新修改内容
  2. 使用配置文件配置devServer

module.exports = {
    
    ..., // 省略了前面的内容
    devServer: {
    
        // --open --contentBase src --port 3000 --hot",
        open: true,
        contentBase: 'src',
        port: 3000,
        hot: true
    }
}

3.4 html的使用html-webpack-plugin

  1. 安装html-webpack-plugin
  2. 配置html-webpack-plugin
plugins: [ // 配置插件的节点
    new htmlWebpackPlugin({
     // 创建一个 在内存中 生成 HTML  页面的插件
      template: path.join(__dirname, './src/index.html'), 
// 指定 模板页面,将来会根据指定的页面路径,去生成内存中的 页面
      filename: 'index.html' // 指定生成的页面的名称
    })
  ],

生成的文件和之前文件的区别

生成的文件里面会自动引入打包好的js文件

4. 解析css文件

  1. main.js中去引入写好的css,这里的引入方式和引入js是不同的import 【css文件的地址】
  2. webpack默认只能处理js文件,如果遇到其他后缀,就会去配置文件中找处理的规则,规则配置如下:
module: {
     // 这个节点,用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      {
     test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
      {
     test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
      {
     test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
    ]
  }
  1. 安装处理的规则

    1. css处理规则:css-loader style-loader
    2. less: less、less-loader
    3. sass: sass-loader、node-sass、sass
  2. 文件的处理顺序是从后向前进行处理

4.1 处理css中的地址问题

默认无法处理css文件中的url地址

  1. 安装url-loader file-loader

  2. loader传参,

    1. 配置limit
    2. 配置name=[hash:8]-[name].[ext]

5. 处理图片数据

  1. 因为webpack不认识.jpg…结尾的资源,所以我们进行静态资源的处理
  2. 使用url-loader file-loader处理图片数据
  3. 正则/\.(jpg|png|gif|bmp)$/,url-loader依赖file-loader所以我们只写了url-loader,配置如下:
{
    
     test: /\.(jpg|png|gif|bmp|svg)$/,
     use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
 }
		4.  loader传参:
         			1.  配置limit 比这个配置文件小的图片会使用base64编码,比这个大的使用地址
         			2.  配置name=[hash:8]-[name].[ext] 使用地址的名字在这里配置:
                   			1.  [hash:8]生成一个唯一的hash码这个hash码是32位,这里截取前8位
                   			2.  [name]代表文件的名字
                   			3.  [ext] 文件的扩展名

6. 处理字体文件

和静态资源类似,配置相应的解析规则就可以,这里也是使用url-loader进行的解析

{
    
  test: /\.(woff|woff2|eot|ttf)$/,
  use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
}

7. 翻译JS的高级语法babel

在 webpack 中,默认只能处理 一部分 ES6 的新语法,一些更高级的ES6语法或者 ES7 语法,webpack 是处理不了的;这时候,就需要 借助于第三方的 loader,来帮助webpack 处理这些高级的语法,当第三方loader 把 高级语法转为 低级的语法之后,会把结果交给 webpack 去打包到 bundle.js 中。

  1. Babel 是一个 JavaScript 编译器

  2. 我们的目的是在低版本浏览器中也可以使用高级的语法。说白了就是为了兼容低版本浏览器,使用这个插件之后,会把高版本的语法转换成低版本的语法。转换规则在配置文件中配置的

    1. 例如:presets: [’@babel/preset-env’]
  3. 使用;

    1. 安装依赖,具体安装官网有介绍npm install [email protected] @babel/core @babel/preset-env

    2. 添加loader的配置:

      {
              
        test: /\.js$/,
        // 排除的部分,node_modules,1、没有必要2、node_modules特别大,打包比较慢
        exclude: /(node_modules|bower_components)/,
        // 使用数组和字符串配置,这里也可以使用对象配置,loader是js文件的处理模块,options是参数,里面参数的
        // 内容是根据不同loader有不同的内容,这里presets是指定babel-loader预置的翻译语法
        use: {
              
          loader: 'babel-loader',
          options: {
              
            presets: ['@babel/preset-env']
          }
        }
      }
      

8. 使用webpack渲染vue

8.1 使用传统方式进行运行

  1. 我们安装的vue默认导入的是运行时环境的vue,在运行时环境中不支持直接使用template渲染,推荐使用render函数渲染
  2. 我们还想通过传统的方式渲染,我们可以导入完整的vue的js,import Vue from 'vue/dist/vue'
  3. 这个导入什么包由package.json里的main属性配置的,我们不能修改node_modules里的内容。我们如果想修改vue导入时候的包的路径,可以修改webpack的配置。
resolve: {
    
    alias: {
     // 修改 Vue 被导入时候的包的路径
       "vue$": "vue/dist/vue.js"
    }
  }

8.2 使用webpack方式进行

  1. 在webpack中推荐使用.vue后缀的文件定义组件。

    1. template:只有一个根节点
    2. script : export default {}是一个对象
      1. 之前构造vue组件的一些属性
    1. style
      1. 写样式
      2. 通过lang可以指定语法(less、sass)
      3. 通过scoped,当
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    
  module: {
    
    rules: [
      // ... 其它规则
      {
    
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    
  module: {
    
    rules: [
      // ... 其它规则
      {
    
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iamzhiyudong/article/details/102615570

智能推荐

用java代码读取dbf文件_java 使用poi读取dbf文件-程序员宅基地

文章浏览阅读2.2k次。import com.linuxense.javadbf.DBFReader;import org.apache.poi.hssf.usermodel.HSSFWorkbook;import org.apache.poi.ss.usermodel.Cell;import org.apache.poi.ss.usermodel.Row;import org.apache.poi.ss.use..._java 使用poi读取dbf文件

TCP通信丢包主要问题及具体问题分析_tcp的客户端发送报文给服务器,不产生丢包或网络阻塞,但是数据不一致是因为-程序员宅基地

文章浏览阅读7.2k次。今天在公司问老大,公司的项目底层,是使用的TCP,因为可靠,自动断线重连,在底层都实现了,但是我记得TCP也会有掉包的问题,所以这文章就诞生了——关于TCP掉包的问题,TCP是基于不可靠的网络实现可靠的传输,肯定也会存在掉包的情况。 如果通信中发现缺少数据或者丢包,那么,最大的可能在于程序发送的过程或者接收的过程出现问题。 例如服务器给客户端发大量数据,Send的频率很高,_tcp的客户端发送报文给服务器,不产生丢包或网络阻塞,但是数据不一致是因为

centos7 配置本地yum源_yum clean all 已加载插件:fastestmirror 正在清理软件源: clouder-程序员宅基地

文章浏览阅读232次。[base-local] #唯一标识,不能重复name=CentOS-local #名字(随便)baseurl=file:///mnt/cdrom #上方步骤一挂载镜像创建的目录enabled=1 #yum源是否启用 1-启用 0-不启用gpgcheck=1 #对源进行检测,安全检测 1-开启 0-不开启,本地源一般不检测,网络源一般检测gpgkey=file:///etc/pki/r..._yum clean all 已加载插件:fastestmirror 正在清理软件源: cloudera-manager os7_

echarts基础语法_echarts splitnumber-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏28次。一.首页知识点推荐:点击首页->可视化实验室里面有很多意想不到的宝藏二.名词解析1.基本名词xAxis 横坐标yAxis 纵坐标grid 整个坐标系是基于grid这个网格去定位的legend 图例dataRange 值域选择,常用于展现地域数据时选择值域范围dataZoom 数据区域缩放,常用于展现大量数据时选择可视范围toolbox 工具箱tooltip 气泡提示框,常用于展现更详细的数据timeline 时间轴series 存放数据的大数组.._echarts splitnumber

汽车厂商的摘星指南:我们能从如祺出行身上学到什么?-程序员宅基地

文章浏览阅读528次。自从Uber、滴滴、神州等等一系列企业之间的战争偃旗息鼓之后,网约车市场已经安静许久了。但不论任何市场,都会有变量的存在,就当人们认为网约车市场趋于稳固时,新的变量又出现..._但无论汽车厂商

页面模块向上渐变显示效果实现-程序员宅基地

文章浏览阅读222次。想要首页不那么枯燥无味吗?还在未首页过于单调而苦恼吧,来试试这个吧(大佬请忽略上述语句·o·)希望本文会对您有所帮助~ ^_^

随便推点

HttpURLConnection上传文件(图片)小试-程序员宅基地

文章浏览阅读662次。需求:用HttpURLConnection模拟上传图片并把图片的名称也要传递过去.简单分析:写入流的时候依次写入 图片名称 + "|" 分隔符 + 图片流然后服务器接收的再处理流.分别取出图片名和图片./** *//** * 上传方法 * 返回上传完毕的文件名 * * */ public String upload(File f) { ..._httpurlconnection上传图片

docker windows10中安装node.js_windows docker 安装nodejs-程序员宅基地

文章浏览阅读1.3k次。docker windows10 中安装node.js启动docker服务获取node最新镜像运行镜像常用参数查看node版本号启动docker服务获取node最新镜像运行命令docker search node获取node镜像接着拉取node最新镜像,运行命令docker pull node当出现图中提示时,表明拉取镜像成功我们可以通过命令查看镜像来确认node是否拉取成功..._windows docker 安装nodejs

yii framework学习笔记-程序员宅基地

文章浏览阅读105次。一、验证和授权 1、基本验证授权方式 在控制器重重写filters方法,这个filter指定的是过滤器,可以是当前控制的方法,必须是以filter开头。 我们来看看通过yii 中示例中博客的例子。 <?phpclass TblPostController extends Controller{ /** * @return array 过滤器列表..._yii regeframe

springmvc 配置文件_配置文件bluej-程序员宅基地

文章浏览阅读296次。1、在同级目录下。默认就ok springMVC1 index.html index.htm index.jsp default.html default.htm default.jsp springMVC org.springframework.web.servlet.DispatcherSe_配置文件bluej

在STM32上实现NTFS之5:GPT分区表的C语言实现(2)GPT实现以及统一方式读取磁盘分区...-程序员宅基地

文章浏览阅读263次。  上一节实现了主GPT头的信息提取,这一节继续提取整个的GPT数据,并且将GPT分区表和MBR分区表两种格式融合成一个模块,使主调函数(也可以说是使用者)不需要关心磁盘的分区表类型:它太底层了,确实不需要过多的关心。  继续看上一节的图1,这里就不贴图了,LBA1的主GPT头给出了分区信息的总数,还有每一个分区信息所占用的字节数,分区信息的结构如表1:表1 分区信息结构(GPT..._stm32 gpt subsystem

Hbase 获取scofield的English成绩信息-程序员宅基地

文章浏览阅读332次。package com.hbase;import java.io.IOException;import org.apache.hadoop.conf.Configuration;import org.apache.hadoop.hbase.Cell;import org.apache.hadoop.hbase.CellUtil;import org.apache.hadoop.hbase.HBaseConfiguration;import org.apache.hadoop.hbas

推荐文章

热门文章

相关标签