0.官方文档:

点击这里进入官方文档


1.webpack概述:

  • webpack是一个流行的前端项目构建工具(打包工具) ,可以解决当前web开发中所面临的困境
  • webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性
    在这里插入图片描述

2.webpack的基本使用:

2.1:打开终端运行命令 npm init -y 初始化包管理配置文件 package.json

2.2:新建 src 源文件目录(里面放程序员自己写的代码比如 html css js images …)

2.3:如果需要引入 jquery 库 终端运行以下命令npm install jquery -S 安装 jquery

  • 自己在src文件夹中创建 index.js 引入下载的jquery包import $ from 'jquery'
    在这里插入图片描述

3.在项目中安装和配置 webpack:

3.1:终端运行 npm install webpack-cli -D 命令,安装webpack相关的包

  • 这里要注意一个问题 : package.jsonpackage-lock.json 文件里的名字默认“name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的话为出现无法安装的问题
    在这里插入图片描述在这里插入图片描述
  • 具体可点击这里 Webpack依赖包安装问题解决方案

3.2:在项目根目录中 ,创建名为 webpack.config.js 的 webpack 配置文件

3.3:在 webpack.config.js 中,初始化一下基本配置

  • 建议选择 development (打包速度快,体积大),项目上线是才改成 production (如果选择production会进行代码的压缩和混淆,打包速度慢,体积小)
module.exports = {
   //编译模式
   mode:'development', 
   //mode 用来指定特定的构架模式 development production
   }

3.4:在package.json中的 script节点 新增一个dev脚本 值为 webpack ,就可以实现打包功能

在这里插入图片描述

  • 在终端运行命令:npm run dev 就可以打包 默认打包成main.jsdist文件夹中

  • src自己新建的index.html 中引入打包后的 js
    在这里插入图片描述


4.配置自定义打包的自定义入口和出口:

4.1:webpack 的 4.x 版本中默认约定:

  • 打包的入口文件为 src -> index.js
  • 打包的输出文件为 dist -> main.js

4.2:如果要修改打包入口与出口,可以在 webpack.config.js中新增如下配置信息:

//配置入口出口绝对路径
 const path =require('path')
 module.exports = {
   //编译模式
   mode:'development', //development production
   
   //以下为webpack的打包入口和出口设置
   //入口文件的配置项
       entry:{
         entry:'./src/index.js'
     },
     //出口文件的配置项
     output:{
         //输出的路径,用了Node语法。
         path:path.resolve(__dirname,'dist'),
         //输出的文件名称
         filename:'bunble.js'
     },
  • 这里稍微提一下joinresolve的区别

1、join是把各个path片段连接在一起, resolve把‘/’当成根目录

path.join(‘/a’, ‘/b’) // Outputs ‘/a/b’
path.resolve(‘/a’, ‘/b’) // Outputs ‘/b’

2、join直接拼接字段,resolve解析路径并返回

path.join(“a”, “b1”, “…”, “b2”)

console打印会得到”a/b2”

path.resolve(“a”, “b1”, “…”, “b2”)

console打印得到”/home/myself/node/a/b2”

4.3:在终端中输入命令:npm run dev 进行打包,就会在 dist文件夹 中生成一个 bunble.js

这时就要修改index.html 中的js引入路径,不再是 main.js 而是 自定义的输出文件 (比如:bundle.js)

在这里插入图片描述


4.配置自动打包功能:

4.1:运行终端命令:npm install webpack-dev-server-D ,安装支持项目自动打包的工具

4.2:修改 package.json -> scripts 中的 dev 命令 如下:(webpack-dev-server)

在这里插入图片描述4.3:将 src -> index.html 中的 script脚本的引入路径改成 “/buldle.js”

4.4:运行命令 npm run dev ,重新进行打包

在这里插入图片描述

  • 注意: 自动打包出的 buldle.js 会隐藏起来,但实际上还是在根目录中 ,所以index.html的js引入路径要发生改变了 改成:
    <script src="/bunble.js"></script>
    在这里插入图片描述

4.5:在浏览器中访问 http://localhost:8080 地址 ,查看打包效果

在这里插入图片描述


5.配置生成预览页面功能:

没有配置这个自动打包就只能出现目录,还要点击src文件夹才能看到预览页面

5.1: 运行命令:npm install html-webpack-plugin -D,生成预览页面的插件
(注意是插件,所以要在 webpack.config.js 配置插件类型 plugins

5.2:修改webpack.config.js 文件头部区域,添加如下配置信息:

//打开localhost 8080 时 直接出现网页页面  
//导入生成预览页面插件,得到一个构造函数, 
const HtmlWebpackPlugin=require('html-webpack-plugin')

 const htmlPlguin=new HtmlWebpackPlugin({
    template:'./src/index.html',//指定要复制那个对象
    filename:'index.html'//指定生成的名称 一般同名
 })

在这里插入图片描述
5.3:修改 webpack.config.js 文件中向外暴露的配置对象,新增如下配置节点:

module.exports = {
     //打开 8080 直接显示 页面
     plugins:[htmlPlguin],
     }
  • pulgins数组 是 webpack打包期间会用到的一些插件列表
    在这里插入图片描述

5.4:运行命令:npm run dev 在浏览器中访问 http://localhost:8080 地址 ,查看打包效果 ,就会直接显示 index.html 不需要点击 src 文件了


6.配置自动打包相关参数:

6.1:修改 package.json -> scripts 中的 dev 命令 如下:(webpack-dev-server --open --host 127.0.0.1 --port 8888)

在这里插入图片描述

open 打包完成后自动打开浏览器页面
host 配置 ip地址 (默认 127.0.0.1)
port 配置端口 (默认 8080)


7.webpack 中的加载器:

7.1:通过 loader 打包 非js模块

在实际开发过程中, webpack默认只能打包处理以.js后缀名结尾的模块,其他非.js后缀名结尾的模块, webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错!

loader加载器可以协助webpack打包处理特定的文件模块,比如:

  • less-loader 可以打包处理 .less 相关的文件
  • sass-loader 可以打包处理 .scss 相关的文件
  • url-1oader 可以打包处理 css 中与 url 路径相关的文件

7.2 loader 的调用过程

在这里插入图片描述


8.loader加载器的基本使用:

8.1:打包处理css文件

  1. 先在 src 文件夹中创建一个 .css文件

  2. 然后在 index.js 中引入 css文件 引入方式:import './css/1.css'
    在这里插入图片描述

  3. 运行 npm style-loader css-loader -D 命令,安装处理 css 文件的 loader

  4. webpack.config.js 的module ->rules 数组 ,添加 loader 规则如下:

//所有第三方文件模块的匹配规则
module:{
rules:[
//调用方式是从后往前调用 匹配结果会先给后面的loader进行第一步处理 ,
//成功后会给上一步loader进一步处理 最终交给 webpack
 {test:/\.css$/,use:['style-loader','css-loader']},
 // test表示匹配文件类型 ,use表示对应要调用的loader
]
}

在这里插入图片描述

  • 细节:调用方式是从后往前调用, 匹配结果会先给后面的loader进行第一步处理 ,成功后会给上一步loader进一步处理 ,最终交给 webpack.

8.2:打包处理less文件

  1. 遵循 8.1 第一二步新建和引入 1.less
  2. 运行 npm less-loader less -D 命令,安装处理 less 文件的 loader(注意: 这条命令的前提是 npm style-loader css-loader -D ,没有运行过这条命令则需要先运行这条命令)
  3. webpack.config.js 的module ->rules 数组 ,添加 loader 规则如下:
module:{
rules:[
 {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
]
}

在这里插入图片描述


8.3:打包处理scss文件

  1. 遵循 8.1 第一二步新建和引入 1.less
  2. 运行 npm sass-loader node-sass -D 命令,安装处理 less 文件的 loader(注意: 这条命令的前提是 npm style-loader css-loader -D ,没有运行过这条命令则需要先运行这条命令)
  • 这里安装可能会出现问题无法安装:

解决方案:
先执行:npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
再执行:npm i node-sass sass-loader -D
安装成功!

  1. webpack.config.js 的module ->rules 数组 ,添加 loader 规则如下:
module:{
rules:[
   {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
]
}
  • 细节: loader配置的名字是 sass 而文件后缀名是 .scss

8.4:配置postCSS 自动添加 css的兼容性前缀

有些css样式具有兼容性,在不同浏览器css样式有时会不起作用,就可以使用postCSS来解决

  1. 运行 npm i postcss-loader autoprefixer -D 命令
  2. 项目根目录中创建 postcss 的配置文件 postcss.config.js,并初始化如下配置:
const autoprefixer=require('autoprefixer')//导入自动添加前座插件

module.exports={
  plugins:[autoprefixer]//挂载插件
}

在这里插入图片描述

  1. webpack.config.js 的module -> rules 数组中 ,修改 css的loader:
module:{
rules:[
    {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
  ]
}

在这里插入图片描述
8.5:打包样式表中的图片和字体文件

  1. 运行命令 npm i url-loader file-loader -D
  2. webpack.config.js 的 module -> rules 数组中,添加loader 规则如下:
module:{
rules:[
 // 样式表图片 loader  limit是图片的最大大小
 {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=130000'},
  ]
}
  • 细节: limit是图片的最大大小,不能超过这个大小,否则页面显示不出

8.6:打包处理 js文件中的高级语法

  1. 安装 babel 转换器相关的包:运行npm i babel-loader @babel/core @babel/runtime -D命令
  2. 安装 babel 语法插件相关的包:npm i @babel/preset-env @babel/plugin-tranform-runtime @babel/plugin-proposal-class-properties -D
  3. 在项目根目录,创建 babel 配置文件 babel.config.js 并初始化配置如下:
module.exports={
  presets:['@babel/preset-env'],
  plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在这里插入图片描述

  1. webpack.config.js的 module -> rules数组中,添加 loader 规则如下:
module:{
rules:[
  // 高级js语法 loader 配置
           // exclude为排除项 表示babel-loader 不需要处理 node_modules 中的js 文件
           {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
    ]
}

在这里插入图片描述

  • 细节: exclude为排除项 表示babel-loader 不需要处理 node_modules 中的js 文件

9.Vue单文件组件:

传统组件的问题和解决方案

1.问题:

1,全局定义的组件必须保证组件的名称不重复
2.字符串模板缺乏语法高亮,在HTML有多行的时候,需要用到丑陋的
3、不支持CSS意味着当HTML和Javascript组件化时, CSs明显被遗漏
4,没有构建步骤限制,只能使用HTML和ES5 Javascript,而不能使用预处理器(如: Babel)

2.解决方案:
针对传统组件的问题, Vue提供了一个解决方案-使用Vue单文件组件。

9.1:vue单文件组件的基本用法
在这里插入图片描述

  • src文件夹中创建components文件夹,再在其中创建.vue后缀名结尾的文件
    在这里插入图片描述
  • style 便签尽量加上 scoped, 防止组件之间的样式冲突

9.2:webpack中配置vue组件的loader

  1. 在index.js中引入.vue文件import './components/App.vue'
    在这里插入图片描述
  2. 运行命令:npm i vue-loader vue-template-compiler -D
  3. webpack.config.js配置文件中,添加 vue-loader 的配置项如下:
//导入 vue相关配置 相当于一个插件 需要在 plugins中 new一下实例 
 const VueLoaderPlugin=require('vue-loader/lib/plugin')
 module.exports={
 plugins:[new VueLoaderPlugin()],
 
 module:{
  rules:[
         // vue 单文件组件正则匹配
          {test:/\.vue$/,loader:'vue-loader'}
          ]  
   }
}

9.3:在webpack项目中使用 vue

  1. 运行命令 npm i vue -S 安装vue
  2. src -> index.js 入口文件中,通过import vue from 'vue' 来导入vue构造函数
  3. 创建vue的实例对象,并指定要控制的el区域
  4. 通过 render函数 渲染App根组件
//导入 Vue 构造函数
import Vue from 'vue'
//导入App 根组件
import App from './components/App.vue'

const vm=new Vue({
  //指定 vm 实例 要控制的页面区域
  el:'#app',

  //render函数 把指定的组件渲染到 el 区域中
  render:h=>h(App)
})

在这里插入图片描述

10.webpack 打包发布:

上线之前需要通过webpack将应用进行整体打包,可以通过 package.json文件配置打包命令

 //在package.json文件中配置webpack打包命令
 //该命令默认加载项目根目录中的webpack.config.js配置文件
 "scripts": {
    //用于打包命令
    "build":"webpack -p"
    //用于开发调试命令
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8080"
  },
 

在这里插入图片描述

  • 执行命令 npm run build 打包发布

发布成功! 自动生成dist文件夹 ,传入后端人员处理
在这里插入图片描述在这里插入图片描述


11.以上所有配置 webpack.config.js 截图

在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐