vue笔记(8)webapck使用

最新推荐文章于 2024-04-20 18:55:08 发布
最新推荐文章于 2024-04-20 18:55:08 发布
阅读量217 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43537987/article/details/93405173
版权

vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865
vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293
vue笔记(3)动画：https://blog.csdn.net/qq_43537987/article/details/93403565
vue笔记(4)组件化：https://blog.csdn.net/qq_43537987/article/details/93403973
vue笔记(5)ref的使用https://blog.csdn.net/qq_43537987/article/details/93404091
vue笔记(6)路由：https://blog.csdn.net/qq_43537987/article/details/93404522
vue笔记(7)watch,methods,computed使用nrm的使用：https://blog.csdn.net/qq_43537987/article/details/93404903

Webpack

在网页中会引用哪些常见的静态资源？

  • JS

  • .js .jsx .coffee .ts（TypeScript 类 C# 语言）

  • CSS

  • .css .less .sass (.scss更新之后sass改为scss)

  • Images

  • .jpg .png .gif .bmp .svg

  • 字体文件（Fonts）

  • .svg .ttf .eot .woff .woff2

  • 模板文件

  • .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

网页中引入的静态资源多了以后有什么问题？？？

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

如何解决上述两个问题

  1. 合并、压缩、精灵图、图片的Base64编码
  2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

什么是webpack?

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

如何完美实现上述的2种解决方案

  1. 使用Gulp， 是基于 task 任务的(适用于下的项目、任务的处理)；
  2. 使用Webpack， 是基于整个项目进行构建的；

  • 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

  • 根据官网的图片介绍webpack打包的过程

  • webpack官网

    在这里插入图片描述

webpack安装的两种方式

  1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令

  2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

  3. 安装时遇到的坑

初步使用webpack打包构建列表隔行变色案例

目录构建：

在这里插入图片描述

  1. 运行npm init -y初始化项目，使用npm管理项目中的依赖包
  2. 创建项目基本的目录结构
  3. 使用npm i jquery --save安装jquery类库
    在这里插入图片描述
  4. 创建main.js并书写各行变色的代码逻辑：
	// 导入jquery类库
    import $ from 'jquery';
    $(function () {
        $('li:even').css('backgroundColor','skyblue');
        $('li:odd').css('backgroundColor',function () {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return "rgb("+r+","+g+","+b+")";
        });
    });
  1. 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
  2. 运行webpack 入口文件路径 输出文件路径对main.js进行处理：
webpack src/js/main.js dist/bundle.js


7.index.html引入bundle.js

 <script src="../dist/bundle.js"></script>
<ul>
  <li>这是第1个li</li>
  <li>这是第2个li</li>
  <li>这是第3个li</li>
  <li>这是第4个li</li>
  <li>这是第5个li</li>
</ul>

8.总结

// 这是 main.js 是我们项目的JS入口文件

// 1. 导入 Jquery
// import *** from *** 是ES6中导入模块的方式
// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from ‘jquery’
// const $ = require(‘jquery’)

// 经过刚才的演示，Webpack 可以做什么事情？？？
// 1. webpack 能够处理 JS 文件的互相依赖关系；
// 2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不是别的语法，转为 低级的，浏览器能正常识别的语法

// 刚才运行的命令格式： webpack 要打包的文件的路径 打包好的输出文件的路径

使用webpack的配置文件简化打包时候的命令

  1. 在项目根目录中创建webpack.config.js
  2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：
    // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        }
    }

当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
// 2. webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件
// 3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
// 4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；

实现webpack的实时打包构建webpack-dev-server

  1. 由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。

  2. 在安装webpack-dev-server之前一定要先安装webpack

    npm i webpack -d

  3. 运行npm i webpack-dev-server -d安装到开发依赖

    npm i webpack-dev-server -d

  4. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中

    "dev": "webpack-dev-server"

    5.启动

    npm run dev

6同时修改index页面中script的src属性为根路径

<script src="/bundle.js"></script>

7.根据http请求访问

http://localhost:8080/

  • 把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快

  • 这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="/bundle.js"></script>

  • 为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

在这里插入图片描述

webpack-dev-server常用命令参数

  • –open 自动打开浏览器
  • –port 3000 指定端口为3000 （8080 =》3000）
  • –contentBase src 打开浏览器时直接打开src （http://localhost:8080/src/）
  • –hot 热更新实现修改代码时不是重新生成文件，而是增加补丁，使打包更快
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

使用html-webpack-plugin插件配置启动页面

插件的作用：

  • 自动在内存中根据指定页面生成一个内存页面
  • 自动把打包好的bundle.js追加到页面中去

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

  1. 运行npm i html-webpack-plugin -D安装到开发依赖
  2. 修改webpack.config.js配置文件如下：
    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }
  1. 修改package.json中script节点中的dev指令如下：
"dev": "webpack-dev-server"
  1. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！
    在这里插入图片描述

实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！

方式1：

  • 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：
"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：(了解)

  1. 修改webpack.config.js文件，新增devServer节点如下：
devServer:{
        hot:true,
        open:true,
        port:4321
    }
  1. 在头部引入webpack模块：
var webpack = require('webpack');
  1. 在plugins节点下新增：
new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

  1. 运行npm i style-loader css-loader -D

  2. mian.js

    import './css/main.css'

  3. 修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
}
  1. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
  2. 注意： webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；
    // 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器；
    // 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D
    // 2. 打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；
  3. 注意： webpack 处理第三方文件类型的过程：
    // 1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
    // 2. 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型；
    // 3. 在调用loader 的时候，是从后往前调用的；
    // 4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到 bundle.js 中去
//webpack.config.js


// 导入处理路径的模块
var path = require('path');
// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']}，
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }
}

使用webpack打包less文件

  1. 运行npm i less-loader less -D
  2. mian.js
import './css/main.less'
  1. 修改webpack.config.js这个配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

  1. 运行npm i sass-loader node-sass -D
  2. mian.js
import './css/mian.scss'
  1. 在webpack.config.js中添加处理sass文件的loader模块：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

处理图片

默认情况下：background：url(’…/images/a.jpg’)无法直接加载

  • webpack默认情况下无法处理css文件中的url地址，不管是图片还是文字，只要是url地址就处理不了
  1. 运行npm i url-loader file-loader -D
  2. 在webpack.config.js中添加处理url路径的loader模块：
{ test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader' }
  1. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

4.如果想要显示真正的地址(固定写法)不建议这样使用

  • 当引用的图片大于或等于给定limit值时，则不会转为base64格式的字符串，如果图片小于给定的limit值，会转为base64的字符串
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960&name=[name].[ext]' },

5.为了防止下面的情况发生建议这样写：(前面加8位哈希值，加几位都可以只要不超过32位)

在这里插入图片描述

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]' },

如果上述写法报错：这样写：!!!

 {
      test: /\.(jpg|png|gif|bmp|jpeg)$/,
      loader: 'url-loader',
        options: {
           limit: 1000,//1000小于图片大小 => img/tianshi.50d14ba.gif
           name: 'img/[name].[hash:7].[ext]'
        }
  },

https://www.jianshu.com/p/3429cd456982

处理字体图标

  • 实测时默认装了bootstrap4，但是没有字体图标font文件夹
 npm i -S bootstrap@3.3.7


import 'bootstrap/dist/css/bootstrap.css'


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

使用babel处理高级JS语法

  1. 运行npm i babel-core babel-loader babel-plugin-transform-runtime -D安装babel的相关loader包(babel的转换工具)
  2. 运行npm i babel-preset-env babel-preset-stage-0 -D（安装babel转换的语法）
  3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项（别人的包不需要再转换）：
    • 配置babel来转换ES6/7的高级语法
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  1. 在项目根目录中添加.babelrc文件，这个文件属于json格式，必须符合json语法规范，不能写注释。并修改这个配置文件如下：
{
    //"presets":["es2015", "stage-0"],不能写注释
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime"]
}

  1. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；

  2. 遇到的坑：
    需要安装低版本的babel-loader
    npm install babel-loader@7.1.5

    https://www.cnblogs.com/soyxiaobi/p/9554565.html

相关文章

babel-preset-env：你需要的唯一Babel插件
Runtime transform 运行时编译es6

Ron韦斯莱
关注
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 4204
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
webpack打包 设置小图片自动转换base6
xiaxia0705的博客
03-07 1585
webpack打包 设置小图片自动转换base6
html静态网页实例（附完整代码）(HTML+CSS+JavaScript响应式游戏资讯网站bootstrap网页)
qq__3200628753的博客
12-20 559
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
html静态页面案例
learning_endless的博客
08-17 3078
初学者的旅游小网站案例
vue笔记(9)vue中使用webapck
qq_43537987的博客
06-23 304
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865 vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293 vue笔记(3)动画：https://blog.csdn.net/qq_43537987/articl...
vue学习笔记（超详细）
jiey0407的博客
03-09 5643
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
VUE学习笔记
qq_48305989的博客
02-16 701
VUE学习笔记 一、Vue基础 (一)、认识Vue.js 1. 官网 英文官网：https://vuejs.org/ 中文官网：https://cn.vuejs.org/ 2. 简介 vue是一套用于构建用户界面的渐进式框架 Vue 采用自底向上增量开发的设计 Vue 的核心库只关注视图层 3. Vue的特点 遵循MVVM模式 代码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以轻松引入vue插件或者其他第三方库开发项目 4. 与其他前端JS框架的关联 借鉴Angular
《Vue入门到精通系列之三》--- webpack详解
最新发布
2301_82244343的博客
04-20 1130
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具模块和打包package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。如何执行我们的build指令呢？1.6.css-loader的使用loader是webpack中一个非常核心的概念。webpack用来做什么呢？
HTML静态网页练习例子
wjfckx的博客
03-14 5670
HTML静态网页 HTML网页 下面展示代码 HTML。 1.background：背景函数 2.Style="color : "颜色 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <bod...
html静态页面示例
08-25
html html静态页面示例 静态页面示例
静态网页设计及实例html
09-06
网页设计 html 静态网页 含实例 网页设计 html 静态网页 含实例
静态网页经典实例(HTML)
08-26
好东西！经典！ 贵在精，所以说好，还是多余！ 友情提示：关于不知道怎么下载的同志： 1。点击进入下载地址列表 2.再次点击一个绿色的立即下载 欢迎下次在来，请留下您宝贵的的留言，增加你的积分！ 谢谢合作！
HTML+css静态网页制作简单实例
06-16
是一款HTML+css的静态网页做成的，没有动态数据库连接
html静态网页综合(多例子绝对好)
11-25
html静态网页综合(多例子绝对好) html静态网页综合(多例子绝对好) html静态网页综合(多例子绝对好)
html静态页面拼接小案例
01-21
简单的html静态页面拼接，不需要php、jsp等include来进行拼接，也不需要开启IIS。
html+css静态页面当当网案例
07-21
非常经典的静态页面案例html代码和css代码很完整
HTML静态网页设计
热门推荐
qq_28891989的博客
05-13 9万+
第一周：HTML写静态网页1.HTML理论介绍及常用格式（1）.HTML主体格式&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;  &lt;meta charset="utf-8" /&gt;  &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt;   &
html实战之一（利用html+css做一个静态页面）
kkae8643150的专栏
09-06 3万+
参照一般博客的样子，做了个超简易版，先秀一下样子 很明显主体部分是三个模块，顶部左侧和右侧div 写的过程中客服的几个问题： 1.参照了w3school的样子，固定主体宽度，调整浏览器时，保持最小宽度 html {    width: 966px;    background-color: #f9f9f9;    margin: 0px auto;    //整体居中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值