Webpack在vue项目中的配置

1.使用webpack的必要性

在刚接触 webpack 的时候一直觉得这个打包工具是个可有可无的东西,不仅要写许多的配置代码,还要安装各种插件来使用。后来接触的次数多了,觉得如果没有 webpack 的打包是很难完成工作的,因此这次来总结一下 webpack 该怎么打包vue项目。

2.使用工具
  • 编译工具:VS Code
  • 打包工具:Webpack
3.配置步骤
① 创建项目文件夹

dist :存放打包后的 js 的文件夹
src:存放html页面以及静态资源
在这里插入图片描述

② 安装webpack和webpack-cli

webpack 和 webpack-cli 都要全局安装后再本地安装
全局安装:-g
本地安装:–save-dev

1.全局安装 webpack 
npm install webpack -g

2.安装 webpack 到项目依赖中(表示将webpack应用在此项目中)
npm i webpack --save-dev

3.安装 webpack-cli 到项目依赖中
npm install --save-dev webpack-cli
③ 初始化项目:得到package.json(这一步可以放在第一步)
npm init -y
④ 引入需要的包,如jquery
npm i jquery -S

然后会在项目中生成一个node_modules文件夹

⑤ 在main.js中引入jquery
import $ from 'jquery'

由于import是ES6语法,浏览器无法支持,因此就算main.js中引入了jquery,也无法使用

因此要对main.js文件进行处理,使得浏览器能够读懂里面的语句

⑥ 使用webpack处理main.js
webpack .\src\main.js --output .\dist\bundle.js
⑦ html中引入bundle.js即可
总结:webpack能做什么
  • 能处理 js 文件的相互依赖问题 (import)
  • 能处理 js 的兼容问题,把高级语法转换成浏览器可以识别的语法

由于上述案例中,每处理一次main文件都要手动输入一次命令很麻烦,因此要借助config
8.在项目根目录中新建 webpack.config.js

const path = require('path')
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}

此时,只要在根目录终端中 命令 webpack 即可自动打包处理main

总结:在终端在中 输入‘webpack’ 会发生什么
  • 首先,没有发现 webpack 后面跟了入口路径和出口路径
  • 然后,就会默认去寻找根目录下的 webpack.config.js 文件
  • 接着,就会解析并执行配置文件中的内容

9.安装 webpack-dev-server 实现自动打包功能

npm install webpack-dev-server --save-dev
必须是在本地安装

此时运行webpack-dev-server会报错,还要在 package.json文件中的 scripts中加一句

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  }

然后运行 npm run dev 即可运行

★webpack-dev-server 生成的 bundle.js 在项目的根目录下

★如果要用webpack-dev-server,注意更改 index.html 的 script 路径

10.webpack-dev-server 帮我们打包生成的 bundle.js ,并没有放到实际的物理磁盘中,而是放到了电脑的内存中,所以,在项目根目录中,根本找不到这个打包好的bundle.js。

虽然看不到,但是可以认为其和dist、src等文件夹平级

webpack-dev-server 可加参数
"dev":"webpack-dev-server --open --port:3000"

在package.json的scripts中加入open和port,即可在运行dev的时候就打开项目

webpack Loader

12.安装 loader 第三方模块加载器

在main.js中引入css文件

import './css/index.css'

webpack 默认只能处理 js 文件,如果要处理 css 文件,则需要安装 loader

npm install style-loader css-loader -D

  1. 在webpack.config.js 中配置这个 第三方模块加载器
module:{ //用于匹配所有的第三方模块加载器
	rules:[ //定义匹配规则,为相应类型的文件找到其处理方式
            {test:/\.css$/,use:['style-loader','css-loader']} //如果检测到css,则使用style-loader和css-loader进行处理
        ]
}

然后 webpack 就会把 import 进来的css一起打包在 bundle.js中

webpack处理第三方包的形式

当 webpack 碰到不是 js 文件的时候,会在 webpack.config.js 中寻找相应的配置规则,如果有处理 这种文件的规则,则会调用

在调用 loader 的时候,是从右往前调用的,当 loader 调用完成后,会打包在 bundle.js 中

  1. 安装处理 css 中的 url 的第三方模块

    npm install url-loader file-loader -D
    install file-loader file-loader -D
    
    

    在 webpack.config.js中加入此设置

    {test:/\.(jpg|png|gif|bmp|jpeg)/,use:'url-loader'}
    只要是在css中出现了 url ,就需要引入 url-loader 来处理
    
    

    在 bundle.js 中,会把url 所引用的图片转成base64格式的图片

    在 use 的 url-loader 后面可以使用 ?limit= 进行传参,可以限制图片的大小,当图片小于限制时,使用base64格式,当图片大于限制,则传递图片的源文件

  2. 在 webpack 中使用 Vue

npm install vue -S

  1. 在 main.js 中引入 Vue
import Vue from '../node_modules/vue/dist/vue.js'
var vm = new Vue({
    el:"#app",
    data:{}
})

  1. 创建.vue文件,作为组件
<template>
    <div>
        <h1>这是从login.vue中得到的组件</h1>
    </div>
</template>

  1. main.js 中引入 login.vue 文件
import login from 'login.vue'

要注意:webpack 中只能打包 js 文件,.vue和 .css 文件一样无法被识别,因此要使用 loader

npm install vue-loader vue-template-compiler -D

同样要在 webpack.config.js 中配置打包规则

test:/\.vue/,use:'vue-loader'

  1. 在实例中注册组件

  2. 注意项: webpack 默认只能打包 js ,对于css 和 vue 等文件,要确保安装了相应的loader

  3. 在 login.vue 中可以定义 export default 对象,当作一个 vue 实例来用。

相当于 login.vue 向外面暴漏了一个对象

  1. export default 的用法

在 js 文件中可以定义 export default 对象,里面可以写一些 变量键值对

在其他的 js 文件中,可以使用 import a from ‘***.js’ ,通过变量 a 获取export 里面的值

★ 注意 一个 js 文件中只能有一个 export default 变量 ☆

但是 除了 export default ,还可以同时使用 export 向外暴露成员

export var title = ‘hello’

export var title2 = ‘helloworld’

在其他 js 文件中,import { title } from ‘***.js’,只能用{ } 形式来接受,且接受名必须和导出名同名

即可使用 title

如果想换个别名来使用 import 的变量,可以用 import {title as mytitle} from ‘***.js’

重点

如果 main.js 要引入 jquery,则要在 webpack.config.js 中定义其全局可用

plugins: [

​ new VueLoaderPlugin(),

​ new webpack.ProvidePlugin({

​ $: ‘jquery’,

​ jQuery: ‘jquery’

​ })

​ ]

否则, bootstrap.js 就找不到 jquery了

Logo

前往低代码交流专区

更多推荐