小白学习vuejs-06--webpack

TheWQ
131 阅读8分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

自学前端

  • 前文
    • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
    • 介绍本次学习的是webpack
    • 这是基于我学习的笔记而来的文章
    • 这不是最新的webpack内容, 是跟随b站王红元codewhy学习的版本

Webpack

  • 什么是webpack?
  • 官方解释:
    • 从本质上来讲, webpack是一个现代的javaScript应用的静模块态打包工具
  • 但是它是什么呢?用概念解释概念, 还是不清晰
    • 我们从两个点来解释上面这句话: 模块 和 打包
  • 前端模块化:

    • 目前使用的前端模块化的一些方案: AMD, CMD, CommonJS, ES6

    • 在ES6之前, 我们想要进行模块化开发, 就必须借助于其他的工具, 让我们可以进行模块化开发

    • 并且在通过模块化开发完成了项目后, 还需要处理模块建的各种一来, 并且将其

      将其进行整合打包

    • 而webpack其中一个核心就是让我们可能进行模块化开发,

      并且会帮助我们处理模块之间的依赖关系

    • 而且不仅仅是javaScript文件, 我们的CSS,图片, json文件

      等等在webpack中都可以被当做模块来使用

    • 这就是webpack中模块化的概念(dist -> distrbution发布 )

    • D:\vscodefile\vue\webpack_run>webpack ./src/main.js ./dist/bundle.js

    • 开发时依赖

    • 运行时依赖


什么是loader

  • loader是webpack中一个非常核心的概念
  • webpack用来做什么呢?

    • 我们之前的实例中, 我们主要是用webpack来处理我们写的js代码, 并且webpack

      会自动处理js之间的相关依赖

    • 但是, 在开发中我们不仅仅有基本的js代码处理, 我们也需要加载css图片,ES6转ES5, 将ts转ES5, 将scss, less转css

      将.jsp .vue 文件转js文件

    • webpack没这个能力

    • 给webpack扩展对应的loader就可以了

  • loader使用过程:
    • 步骤一: 通过npm安装需要使用的loader
    • 步骤二: 在webpack.config.js中的modules关键字下进行配置
  • 大部分loader我们都可以在webpack的官网中找到, 并且学习对应的用法

    下载: npm install --save-dev less-loader@4.1.0 less

图片文件处理-修改文件名称

  • 我们发现webpack自动帮助我们生成一个非常长的名字

    • 这是一个32位hash值, 目的是防止名字重复

    • 但是, 真实开发中, 我们可能对打包的图片名字有一定的要求

    • 比如, 将所有图片放在一个文件夹中, 跟上图片原来的名称, 同时也要

      防止重复img/name.hash:8.ext (哈希值位数限制)

  • 所以, 我们可以在options中添加如下选项
    • img:文件要打包到的文件夹
    • name获取图片原来的名字, 放在该位置
    • hash: 为了防止图片名称冲突,依然使用hash, 但是我们只保留8位
    • ext: 使用图片原来的扩展名
  • 但是, 我们发现图片并没有显示出来, 这是因为图片的路径不正确
    • 默认情况下, webpack会将生成的路径直接返回给使用者
    • 但是, 我们整个程序是打包在dist文件夹下的, 所以这里我们需要在路径下载添加一个dist/

ES6语法处理

  • 如果你仔细阅读webpack打包的js文件, 发现写的ES6语法并没有转成ES5, 那么就以为着可能一些对ES6还不支持

    的浏览器没有办法很好的运行我们的代码

  • 前面我们说过, 如果希望将ES6的语法转成ES5, 那么就需要使用babel

    • 而在webpack中, 我们直接使用babel对应的loader就可以了

    • npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

  • 重新打包, 查看bundle.js文件, 发现其中的内容变成了ES5的语法

webpack 引入vue.js

  • 后续项目中, 我们会使用Vue.js进行开发, 而且会以特殊的文件来组织vue的组件
    • 所以, 下面我们来学习一下如何在我们的webpack环境中集成Vue.js
  • 现在, 我们希望在项目中使用Vue.js那么必然需要对其有依赖, 所以需要先进行安装
    • 注: 因为我们后续是在实际项目中也会使用vue的所以并不是开发时依赖

    • npm install vue --save

  • 那么, 接下来就可以按照我们之前学习的方式来使用vue了
  • 有两种模式
    1. runtime-only -> 代码中, 不可以有任何的template
    2. runtime-compiler -> 代码中, 可以有template, 因为有complier可以用于编译template

el和template区别 (一)

  • 正常运行之后, 我们来考虑另外一个问题:
    • 如果我们希望将data中的数据显示在界面中, 就必须是修改index.html
    • 如果我们后面自定义了组件, 也必须修改index.html来使用组件
    • 但html模板在之后的开发中, 我并不希望手动来频繁修改, 是否可以做到呢?
  • 定义template属性:
    • 在前面的Vue实例中, 我们定义了el属性, 用于和index.html中的#app进行绑定, 让Vue实例之后可以管理它其中的内容
    • 这里, 我们可以将div元素中的{{message}}内容删掉, 只保留一个基本的id为div的元素
    • 但是如果我们依然希望在其中显示{{message}}的内容, 应该字母处理呢?
    • 我们可以再定义一个template属性, 代码如下:
    • new Vue{{
  el: '#app',
  template: '<div id='app'>{{message}}</div>,
  data: {
    message: 'coderwhy
  }
}}

.vue文件封装处理

  • 一个组件以一个js对象的形式进行组织和使用的时候是非常不方便的
    • 一方面编写template模块非常的麻烦
    • 另一方面如果有样式的话, 我们写在哪里比较合适呢?
  • 现在, 我们以一种全新的方式来组织一个vue的组件
  • 但是, 这个时候这个文件可以被正确的加载吗?
    • 必然不可以, 这种特殊的文件以及特殊的格式, 必须有人帮助我们处理
    • vue-loader以及vue-template-compiler
  • 安装npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
  • 修改webpack.config.js的配置文件

认识plugin

  • plugin是什么?
    • plugin是插件的意思, 通常是用于对某个现有的架构进行扩展
    • webpack中的插件, 就是对webpack现有功能的各种扩展, 比如打包优化, 文件压缩等等
  • loader和plugin的区别
    • loader主要用于转换某些类型的模块, 它是一个转换器
    • plugin是插件, 它是对webpack本身的扩展, 是一个扩展器
  • plugin的使用过程
    • 步骤一: 通过npm安装需要使用的plugins(mou写webpack已经内置的插件不需要安装
    • 步骤二: 在webpack.config.js中的plugins中配置插件
  • 下面就是一些插件

添加版权的plugin

  • 我们先来使用一个最简单的插件, 未打包文件添加版权声明
    • 该插件的名字叫BannerPlugin, 属于webpack自带的插件

打包html的plugin

  • 目前, 我们的index.html文件是存放在项目的根目录下的.
    • 我们也知道, 在真实发布项目时, 发布的dist文件夹中的内容, 但是dist文件夹中如果没有index.html文件, 那么打包的js文件也就没有意义了
    • 所以, 我们需要将index.html文件打包到dist文件夹中, 这个时候就可已使用HtmlWebpackPlugin插件
  • HtmlWebpackPlugin插件可以为我们做这些事情:
    • 自动生成一个index.html文件(可以指定模板来生成)
    • 将打包的js文件, 通过script标签插入到body中
  • 安装HtmlWebpackPlugin插件

  • 松开

  • 使用插件, 修改webpack.config.js
    • 这里的template表示根据什么模板来生成index.html
    • 另外, 我们需要删除之前在output中添加的publicPath属性
    • 否则插入的script标签中的src可能会有问题

js压缩的plugin

  • 在项目发布之前我们必然需要的js等文件进行压缩处理
    • 这里, 我们就对打包的js文件进行压缩
    • 我们使用第一个第三方的产检uglifyjs-webpack-plugin, 并且版本号指定1.1.1, 和CLI2保持一致

    • npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

  • 修改webpack.config.js文件, 使用插件
  • :
  • 查看打包后的bunnlde.js文件, 是已经被压缩过了

搭建本地服务器

  • webpack提供了一个可选的本地开发服务器, 这个本地服务器基于node.js搭建, 内部使用express框架, 可以实现我们想要浏览器自动刷新显示我们修改后的结果
  • 不过它是一个单独的模块, 在webpack中使用之前需要先安装它

  • npm install -save-dev webpack-dev-server@2.9.1

  • devserver也是作为webpack中的一个选项, 选项本身可以设置如下属性:
    • contentBase: 为哪一个文件夹提供本地服务, 默认是根文件夹, 我们这里要填写./dist
    • port: 端口号
    • inline: 页面实时刷新
    • historyApiFallback: 在SPA页面中, 依赖HTML5的history模式
  • webpack.config.js文件夹配置修改

  • devServer: {

    contentBase: './dist',

inline: true

    }

    "dev": "webpack-dev-server --open"

  • 我们可以在配置另外一个scripts:
    • open参数表示直接打开浏览器

后记

  • 希望对对前端有兴趣的朋友们有帮助
  • 这篇文章主要是关于webpack的, 希望大家喜欢
  • vue的作者是中国人尤雨溪, 非常厉害的人
avatar
文章
阅读
粉丝