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

  • JS

  • .js .jsx .coffee .ts(TypeScript 类 C# 语言)

  • CSS

  • .css .less .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安装到项目依赖中

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

  1. 运行npm init初始化项目,使用npm管理项目中的依赖包

  2. 创建项目基本的目录结构

  3. 使用cnpm i jquery --save安装jquery类库

  4. 创建main.js并书写各行变色的代码逻辑:

    // 导入jquery类库
  import $ from 'jquery'

  // 设置偶数行背景色,索引从0开始,0是偶数
  $('#list li:even').css('backgroundColor','lightblue');
  // 设置奇数行背景色
  $('#list li:odd').css('backgroundColor','pink');
  1. 直接在页面上引用main.js会报错,因为浏览器不认识import这种高级的JS语法,需要使用webpack进行处理,webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法;

  2. 运行webpack 入口文件路径 输出文件路径main.js进行处理:

webpack src/js/main.js dist/bundle.js

使用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的实时打包构建

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

  2. 运行cnpm i webpack-dev-server --save-dev安装到开发依赖

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

  • 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指令,指定启动的根目录:

 "dev": "webpack-dev-server --contentBase src"

同时修改index页面中script的src属性为<script src="bundle.js"></script>

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

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

  1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖

  2. 修改webpack.config.js配置文件如下:

    // 导入处理路径的模块
  var path = require('path');
  // 导入自动生成HTMl文件的插件
  var htmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
      entry: path.resolve(__dirname, 'src/js/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.jsonscript节点中的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. 运行cnpm i style-loader css-loader --save-dev

  2. 修改webpack.config.js这个配置文件:

module: { // 用来配置第三方loader模块的
      rules: [ // 文件的匹配规则
          { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
      ]
  }
  1. 注意:use表示使用哪些模块来处理test所匹配到的文件;use中相关loader模块的调用顺序是从后向前调用的;

使用webpack打包less文件

  1. 运行cnpm i less-loader less -D

  2. 修改webpack.config.js这个配置文件:

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

使用webpack打包sass文件

  1. 运行cnpm i sass-loader node-sass --save-dev

  2. webpack.config.js中添加处理sass文件的loader模块:

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

使用webpack处理css中的路径

  1. 运行cnpm i url-loader file-loader --save-dev

  2. webpack.config.js中添加处理url路径的loader模块:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
  1. 可以通过limit指定进行base64编码的图片大小;只有小于指定字节(byte)的图片才会进行base64编码:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel处理高级JS语法

  1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包

  2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法

  3. webpack.config.js中添加相关loader模块,其中需要注意的是,一定要把node_modules文件夹添加到排除项:

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  1. 在项目根目录中添加.babelrc文件,并修改这个配置文件如下:

{
  "presets":["es2015", "stage-0"],
  "plugins":["transform-runtime"]
}
  1. 注意:语法插件babel-preset-es2015可以更新为babel-preset-env,它包含了所有的ES相关的语法;

相关文章

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

Vue.js - Day5 - Webpack的更多相关文章

  1. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  2. Vue.js 在 webpack 脚手架中使用 cssnext

    Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...

  3. 总结下用Vue.js和webpack遇到的问题

    这段时间用vue.js+webpack做一个单页应用的demo,第一次尝试模块化,技术水平有限,学习不够深入,总是遇到各种问题,所谓前事不忘后事之师,so记录下. 1.ES6匿名函数里面this值 结 ...

  4. 用Vue.js和Webpack开发Web在线钢琴

    缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...

  5. RAP、Mock.js、Vue.js、Webpack

    最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...

  6. vue.js+vue-router+webpack keep-alive用法

    本文是机遇 提纲:   现有需求 各个解决方案的优缺点 相关的问题延伸 keep-alive使用详解   现有需求   每个项目中都存在许多列表数据展示页面,而且通常包含一些筛选条件以及分页.   并 ...

  7. vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码

    webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...

  8. Vue.js和Webpack

    Vue.js Vue简单介绍 是一个轻量级的渐进式框架,一个前端项目可以使用使用Vue.js的一两个特性也可以整个项目都用Vue.js,很方便实现项目的增量开发 Vue.js的使用:() 在html页 ...

  9. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

随机推荐

  1. 万径人踪灭(FFT+manacher)

    传送门 这题--我觉得像我这样的菜鸡选手难以想出来-- 题目要求求出一些子序列,使得其关于某个位置是对称的,而且不能是连续一段,求这样的子序列的个数.这个直接求很困难,但是我们可以先求出所有关于某个位 ...

  2. 微信小程序内嵌网页能力开放 小程序支持内嵌网页文档说明

    为了方便开发者灵活配置微信小程序,张小龙现在开放了小程序的内嵌网页功能,这是一个非常大的惊喜啊,以后意味着你只要开放一个手机端网站,就可以制作一个小程序了哦.操作方法1.开发者登录微信小程序后台,选择 ...

  3. fragment error

    error:   android.view.InflateException: Binary XML file line #6: Error inflating class fragment 解决办法 ...

  4. su命令,sudo命令,visudo命令

    一.命令su 语法 : su [-] username后面可以跟 ‘-‘ 也可以不跟,普通用户su不加username时就是切换到root用户,当然root用户同样可以su到普通用户. ‘-‘ 这个字 ...

  5. 关于 jwTextFiled 的使用说明

    我在些项目中多次对一些输入框做了相同的代码操作,终于有一天忍不住了,MD必须写一个小的框架解决这个搬砖的问题.经过一天的战斗,于是 jwTextFied 就默默的诞生了. 地址:https://git ...

  6. Websocket 学习

    一.含义 WebSocket 是一种在单个TCP连接上进行全双工通讯的协议.   WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket ...

  7. ElasticSearch基础之批量操作(mget+mbulk)

      在前面的演示中,我们都是基于一次http查询,每次查询都要建立http的三次握手请求,这样比较耗费性能!因此ES给我们提供了基本的批量查询功能,例如如下的查询,注意里面的index是可以任意指明的 ...

  8. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  9. Identity Server 4 原理和实战(完结)_汇总贴

    视频地址:https://www.bilibili.com/video/av42364337 语雀地址:https://www.yuque.com/yuejiangliu/dotnet/solenov ...

  10. [OpenGL]配置GLFW(超详细)

    注:本文可转载,转载请著名出处:http://www.cnblogs.com/collectionne/p/6937644.html.本文还会修改,如果不在博客园(cnblogs)发现本文,建议访问上 ...