Javascript

Vue学习Day7 webpack使用、处理各种文件、npm init初始化、局部安装webpack、package.json配置、webpack配置vue

本文主要是介绍Vue学习Day7 webpack使用、处理各种文件、npm init初始化、局部安装webpack、package.json配置、webpack配置vue,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

想利用暑假时间好好学习一下vue,会记录每一天的学习内容。
今天是学习vue的第7天!
(不过今天好像都是webpack的相关内容TT,只有一点点关于vue的配置)

起起伏伏乃人生常态,继续加油~


学习内容

  • 1. webpack的基本使用
    • 准备工作
    • js文件的打包
    • 使用打包后的文件
  • 2. webpack.config.js文件
  • 3. 使用npm init初始化项目
  • 4. 局部安装webpack
  • 5.package.json中定义启动
  • 6. webpack-loader
  • 7. webpack-css文件处理
    • 准备工作
    • 打包报错
    • style-loader、css-loader
  • 8. webpack-less文件的处理
    • 准备工作
  • 9. webpack-图片文件的处理
    • url-loader
    • file-loader
      • 修改文件名称
  • 10.webpack-ES6转ES5
  • 11. webpack配置vue
    • 打包vue-错误信息


1. webpack的基本使用

准备工作

我们创建如下文件和文件夹:

  • dist文件夹:用于存放之后打包的文件
  • src文件夹:用于存放我们写的源文件
    • main.js:项目的入口文件
    • mathUtils.js:定义了一些工具函数
  • index.html:浏览器打开展示的首页html

在这里插入图片描述
mathUtils.js中的内容:

在这里插入图片描述
main.js中的内容:

在这里插入图片描述


js文件的打包

  • 现在的js文件使用了模块化的方式进行开发,他们可以直接使用吗?不可以
    • 如果直接在index.html引入这main.jsmathUtils.js文件,浏览器并不识别其中的模块化代码
    • 另外,在真实项目中有许多这样的js文件时,我们一个个引用非常麻烦,并且后期管理不便
  • 这时我们应该使用webpack工具,对多个js文件进行打包
    • webpack就是一个模块化的打包工具,所以它支持我们代码中写模块化,可以对模块化的代码进行处理。
    • 另外,如果在处理完所有模块之间的关系后,将多个js文件打包到一个js文件中,在index.html中引入也很方便
  • 如何打包呢?使用webpack的指令即可
    (记得要先进入这两个js文件所在文件夹,再输指令)
    在这里插入图片描述
    跳出这个就是成功了:
    在这里插入图片描述

使用打包后的文件

打包后会在dist文件下,生成一个bundle.js文件

  • 文件内容有些复杂,这里暂时先不看
  • bundle.js文件,是webpack处理了项目直接文件依赖后生成的一个js文件,我们只需要在index.html中引入这个 bundle.js文件即可
    在这里插入图片描述
    index.html控制台成功输出:
    在这里插入图片描述

2. webpack.config.js文件

  • 如果每次使用webpack的命令都需要写上入口和出口作为参数,会非常麻烦
  • 我们可以将这两个参数写到配置里,在运行时,让它直接读取
  • 创建一个webpack.config.js文件
    在这里插入图片描述

但是这里的require('path')依赖于node相关的包,所以要先用npm init去初始化这个项目


3. 使用npm init初始化项目

使用npm init会生成一个package.json文件,这个文件主要用来记录这个项目的详细信息,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个文件中

在终端输入npm init
在这里插入图片描述
之后会让我们配置一些信息
(没填的地方直接回车)
在这里插入图片描述
成功生成 package.json
在这里插入图片描述


4. 局部安装webpack

当我们配置完webpack.config.js文件后,我们在终端输入webpack就可以进行打包了,但是此时我们使用的是全局的webpack,如果我们想使用局部webpack来打包呢?

  • 因为一个项目往往依赖于特定的webpack版本,而全局webpack的版本可能和这个项目的所依赖的webpack版本不一致,导致打包出现问题
  • 所以通常一个项目,都有自己局部的webpack

第一步:项目中需要安装自己局部的webpack

  • 这里我局部安装了webpack3.6.0
    (和我全局安装的版本是一样的)
    npm install webpack@3.6.0 --save-dev
  • 安装成功以后会生成这个node_modules文件
    在这里插入图片描述
    package.json也会自动生成这部分
    在这里插入图片描述

第二步:在终端中输入node_modules/.bin/webpack启动局部webpack打包(如果输入webpack,使用的是全局webpack)
但是,每次启动局部webpack打包都要输入node_modules/.bin/webpack一长串命令很不方便

  • 我们可以在package.jsonscripts中定义自己的执行脚本

5.package.json中定义启动

在这里插入图片描述
scripts中添加这条"build":"webpack"命令,scripts中的脚本在执行时,会按照一定的顺序寻找命令对应的位置

  • 首先,会寻找本地的node_modules/.bin路径中对应的命令
  • 如果没有找到,就去全局的环境变量中寻找
  • 如何执行build命令?
    • 终端输入npm run build即可
    • 这里会启动局部webpack,如果没有才会启动全局webpack

6. webpack-loader

  • webpack用来做什么:
    • 在之前的实例中,我们主要用webpack来处理我们写的js代码,并且webpack会自动处理js文件之间相关的依赖
    • 但是在开发中,我们不止有基本的js代码处理,我们也需要加载css图片,也包括一些高级的将ES6转成ES5,将TypeScript转成ES5代码,将scssless转成css等等
    • 对于webpack本身的能力来说,并不支持这些转化
    • webpack扩展对应的loader就可以了!
  • loader使用过程:(也可以跟着官网的教程做)
    • 第一步:通过npm安装需要使用的loader
    • 第二步:在webpack.config.js中的module关键字下进行配置
  • 大部分loader都可以在webpack官网中找到,并且学习对应的用法
    在这里插入图片描述

7. webpack-css文件处理

准备工作

  • 项目开发过程中,我们必然需要添加很多的样式,样式我们往往写到一个单独的文件中
    • src目录中,创建一个css文件,其中一个创建normal.css文件
    • 可以重新组织文件的目录结构,将零散的js文件放到一个js文件夹中
      在这里插入图片描述

⚠️:此时就算在normal.css中写了样式,也不会在index.html中生效

  • 因为我们并没有在index.html引用它
  • 而且webpack也不可能找到它,因为只有一个入口,就是在webpack.config.js中设置的entrymain.js
    在这里插入图片描述
  • webpack会从main.js开始查找其他依赖的文件,然后一起打包,显然此时这里只依赖了mathUtils.js,所以不可能找到normal.css

⚠️:我们需要在main.js中与normal.css建立依赖
在这里插入图片描述


打包报错

在入口main.js建立了与normal.css的依赖以后,我们再次尝试打包,因为前面已经配置好了,现在启动局部webpack打包只需要用npm run build即可
在这里插入图片描述
但是报错了,于是我们应该去webpack官网找到对应的loader


style-loader、css-loader

在这里插入图片描述
安装style-loadercss-loader

  • 终端输入npm install css-loadernpm install style-loader
  • 这里我安装的css-loader版本是2.0.2style-loader版本是0.23.1
  • npm install --save-dev css-loader@2.0.2npm install --save-dev style-loader@0.23.1

根据官方,我们需要在webpack.config.js中添加如下配置:
在这里插入图片描述
(⚠️一下我的注释)

然后在npm run build,打开index.html就会发现样式生效了


8. webpack-less文件的处理

如果想要在项目中使用lessscssstylus等CSS预处理器来写样式,webpack同样也可以帮我们处理

  • 这里以less为例
    (vscode有插件可以将less编译为css,就直接打包css文件,可以跳过这个part)

准备工作

我们先创建一个less文件,依然放在css,依然放在css文件夹中
和css文件处理的步骤一样

  • 先在main.js中建立依赖
    在这里插入图片描述
  • 安装(我这里指定了less-loader版本4.1.0,less版本3.9.0)
    npm install --save-dev less-loader@4.1.0 less@3.9.0
  • webpack.config.js中添加配置
    在这里插入图片描述
    然后在npm run build,打开index.html就会发现样式生效了

9. webpack-图片文件的处理

在刚刚的normal.css中设置一张图片为背景图
在这里插入图片描述现在直接尝试打包,会报错
在这里插入图片描述


url-loader

图片处理,我们使用url-loader

  • 安装url-loader(我这里指定了url-loader版本1.1.2)
    npm install --save-dev url-loader@1.1.2
  • 修改webpack.config.js配置文件:
    在这里插入图片描述

file-loader

当图片小于设置的limit属性时,打包时会对图片进行base64编码,那如果大于设置的limit属性呢?
目前尝试打包,还是会继续报错,所以当大于设置的limit属性时,要通过file-loader处理

  • 安装file-loader:(我这里指定了file-loader版本3.0.1)
    npm install --save-dev file-loader@3.0.1
  • 当安装完,再次打包,就会发现dist文件夹下多一个图片文件,这是webpack帮我们自动生成的
    在这里插入图片描述

修改文件名称

  • webpack帮我们自动生成的文件名是一个32位哈希值,但是在真实开发中,我们应该对打包的图片名有一定的要求
  • 比如,我们可能会将所有的图片放在一个文件夹中,跟上图片原来的名称,同时也要防止重复
  • 我们可以在options中添加上如下选项:
    • img:文件要打包到的文件夹
    • name:获取图片原来的名字,放在该位置
    • hash:8:为了防止图片在同一个文件夹中名字冲突,依然使用哈希值,只是我们只保留8位
    • ext:使用图片原来的扩展名
      在这里插入图片描述
  • 这个时候再打包,发现运行不报错了。但是index.html中图片未能正常显示
    • 默认情况下,webpack会将生成的路径直接返回使用,打开index.html的控制台,这个时候引用的url是错误的在这里插入图片描述
    • 因为我们的整个程序是打包在dist文件下的,index.htmlsrc文件中,所以我们希望能在路径下自动添加一个../dist
      在这里插入图片描述
  • 解决方法:在webpack.config.js文件中,配置publicPath
    (在之后index.html可能也要放进dist文件夹,到时候还要改)
    在这里插入图片描述
    之后再打包,能成功显示啦
    在这里插入图片描述

10.webpack-ES6转ES5

  • 对于前面webpack打包的js文件,部分ES6语法还未转成ES5,那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码
  • 在前面我们说过,如果希望将ES6的语法转成ES5,就需要使用babel
    • 而在webpack中,我们直接使用babel对应的loader就可以了
      • npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
    • 配置webpack.config.js文件
      在这里插入图片描述
      重新打包,查看bundle.js文件,会发现其中的内容已经变成了ES5的语法

11. webpack配置vue

  • 后续会使用Vuejs进行开发,而且会以特殊的文件来组织vue的组件
    • 下面要学习如何在webpack环境中集成Vuejs
  • 希望在项目中使用Vuejs,必然需要对其有依赖,所以先进行安装
    ⚠️:因为后续是在实际项目中也会使用vue的,所以并不是开发时依赖,不用加-dev
    (这里我指定了版本2.5.21)
    npm install vue@2.5.21 --save
  • main.jsindex.html中使用vue
    在这里插入图片描述在这里插入图片描述
    但是,会报错!

打包vue-错误信息

在这里插入图片描述
这个错误说的是我们使用的是runtime-only版本的vue,编译不了模版

  • 我们需要修改webpack的配置,添加如下配置即可
    在这里插入图片描述在这里插入图片描述

今天就只学一些webpack配置了,因为我下载的都是指定的版本,现在的新版本可能对一些处理有了不同方法,具体还是参考webpack官网 https://webpack.js.org


这篇关于Vue学习Day7 webpack使用、处理各种文件、npm init初始化、局部安装webpack、package.json配置、webpack配置vue的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!