webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能。下面我们就通过搭建一个 vue 项目来学习使用 webpack

主要环境:

  • node v14.15.0
  • npm v6.14.9
  • webpack v5.10.0
  • webpack-cli v4.2.0
  • vue v2.6.12

本项目实现以下功能:

  • vue/cli类似的基本目录
  • 支持*.vue,*.css等文件
  • 支持es6及以上语法
  • 支持加载图片
  • 热加载

构建项目基本目录

执行npm init并创建以下目录

demo
├─ dist
├─ public
└─ src

安装必要依赖

webpack 及相关插件

  • webpack npm install -D webpack webpack-cli
  • webpack 本地服务器插件 npm install -D webpack-dev-server
  • html 生成插件,它会将生成的 js 和 css 文件插入到 html 中 npm install -D html-webpack-plugin
  • vue 插件 npm install -D vue-loader vue-template-compiler
  • css 插件 npm install -D css-loader style-loader
  • 图片插件 npm install -D file-loader url-loader
  • babel 插件 npm install -D @babel/core @babel/cli @babel/preset-env babel-loader, npm install @babel/polyfill

安装 vue

  • npm install vue vue-router

搭建项目

简单实现 webpack 打包

新建src/main.js,并写入:

console.log('Hello Webpack');

根目录下新建webpack.config.js,并写入:

const path = require('path');

const config = {
entry: './src/main.js', // 定义入口文件
output: {
path: path.resolve(__dirname + '/dist'), // 打包生成文件地址,必须是绝对路径
filename: '[name].build.js', // 生成的文件名
},
};
module.exports = config;

package.json中的scripts中添加一个脚本:

{
...
"scripts": {
"build": "webpack --mode=production"
}
...
}

在命令行中执行npm run build,此时项目目录中出现了dist/main.build.js,证明执行成功

js 文件打包成功后,需要一个 html 文件来引入这个 js 文件,这就需要用到我们一开始下载的html-webpack-plugin

首先新建public/index.html创建一个基础页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack搭建vue</title>
</head>
<body>
<!-- 如果浏览器禁止加载js脚本 -->
<noscript>
<strong>
We're sorry but this site doesn't work properly without JavaScript
enabled. Please enable it to continue.
</strong>
</noscript> <div id="app"></div>
<!-- build后的文件会在这之后自动引入 -->
</body>
</html>

public下随便放入一个图标favicon.ico,然后在webpack.config.js中配置插件:

const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
...
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html', // 生成的文件夹名
template: 'public/index.html', // 模板html
favicon: 'public/favicon.ico', // 图标
}),
]
}
...

之后再次执行npm run builddist下会生成index.htmlfavicon.icomain.build.js三个文件,通过浏览器打开index.html,就可以发现控制台输出了Hello Webpack,页面图标也变成了自己设定的图标,通过编辑器打开index.html,我们会发现 webpack 帮助我们自动引入了favicon.icomain.build.js

<!DOCTYPE html>
<html>
<head>
...
<link rel="icon" href="favicon.ico" />
</head>
<body>
...
<script src="main.build.js"></script>
</body>
</html>

开启热加载

webpack 热加载需要用到webpack-dev-server,在开始我们已经安装过了,在webpack.config.js中配置:

const config = {
...
devServer: {
contentBase: path.join(__dirname, 'dist'), // html所在路径
compress: true, // 是否压缩
port: 3000, // 端口
hot: true, // 热部署
open: true, // 打包完成后自动打开网页
}
}

增加package.json脚本:

{
...
"scripts": {
"build": "webpack --mode=production",
"serve": "webpack serve"
}
...
}

执行npm run serve,打包成功后会自动打开网页,并且当你修改src/main.jssrc/index.html的内容的时候,浏览器会自动重新打包并刷新

配置 Vue

让 webpack 打包*.vue文件需要vue-loadervue-template-compiler,同时为了 webpack 能够解析 vue 中的 css 还需要用到css-loadervue-style-loader,在webpack.config.js配置以上插件:

...
const { VueLoaderPlugin } = require('vue-loader'); const config = {
...
// loaders
module: {
rules: [
{
// *.vue
test: /\.vue$/,
loader: 'vue-loader',
},
{
// `*.vue` 文件中的 `<style>` 块以及普通的`*.css`
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
],
},
plugins: [
...
new VueLoaderPlugin(),
],
...
};
...

配置完后新建src/App.vue:

<template>
<div class="example">
{{ msg }}
</div>
</template> <script>
export default {
data() {
return {
msg: 'Hello Webpack',
};
},
};
</script> <style>
.example {
color: red;
}
</style>

修改src/main.js:

import Vue from 'vue';
import App from './App.vue'; new Vue({
el: '#app',
render: (h) => h(App),
});

然后运行npm run serve,即可看到页面上显示的Hello Webpack

配置图片资源的加载

使用file-loaderurl-loader加载,它们都是用于打包文件和图片资源的,区别在于url-loader封装了file-loader

在访问网站时如果图片较多,会发很多 http 请求,会降低页面性能。这个问题可以通过 url-loader 解决。url-loader 会将引入的图片编码,生成 dataURl。相当于把图片数据翻译成一串字符,再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。

当然,如果图片较大,编码会消耗性能。因此 url-loader 提供了一个 limit 参数,小于 limit 字节的文件会被转为 DataURl,大于 limit 的还会使用 file-loader 进行 copy。

此处我们使用 url-loader,由于它是基于 file-loader 的封装,所以也需要引入 file-loader

...
const config = {
...
module: {
rules: [
...
{
// 图片
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 25000,
},
},
},
],
},
};
...

然后添加一个图片src/assets/logo.png,在App.vue中引入:

<template>
<div class="example">
{{ msg }}
<img :src="url" />
</div>
</template> <script>
import logo from './assets/logo.png'; export default {
data() {
return {
msg: 'Hello Vue1',
url: logo,
};
},
};
</script> <style>
.example {
color: red;
}
</style>

再次npm run serve即可看到图片

配置 babel

babel 可以将 js 的高版本(es6)语法转换为低版本,使得项目兼容低版本浏览器

需要我们注意的是,babel7 与 babel6 不兼容,因此需要使用最新版本的 babel 和 babel 插件,在前面文章开始我们已经安装了 babel7 版本的 babel 插件,下面我们在webpack.config.js中配置它:

...
const config = {
...
module: {
rules: [
...
{
// *.js
test: /\.js$/,
exclude: /node_modules/, // 不编译node_modules下的文件
loader: 'babel-loader',
},
],
},
};
...

配置完后在项目根目录下创建一个 babel 的配置文件.babelrc,写入如下内容:

{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}

更多 babel 配置请查看babel 中文官网

配置完成后新建一个src/utils/getData.js测试一下:

export default function getData() {
return new Promise((resolve, reject) => {
resolve('ok');
});
}

src/App.vue中引入:

<template>
<div class="example">
{{ msg }}
<img :src="url" />
</div>
</template> <script>
import logo from './assets/logo.png';
import getData from './utils/getData'; export default {
data() {
return {
msg: 'Hello Vue1',
url: logo,
};
},
methods: {
async fetchData() {
const data = await getData();
this.msg = data;
},
},
created() {
this.fetchData();
},
};
</script> <style>
.example {
color: red;
}
</style>

重新执行npm run serve后,页面显示ok,babel 引入成功

设置 src 别名以及省略后缀

为了方便开发,我们可以给 src 目录设置别名,以及将常用文件类型的后缀省略

...
const config = {
...
// 解析路径
resolve: {
// 设置src别名
alias: {
'@': path.resolve(__dirname, 'src'),
},
//后缀名 可以根据需要自由增减
extensions: ['.js', '.vue'],
},
...
};
...

这样我们就可以以如下方式导入 vue 和 js 文件:

// 导入App.vue
import App from '@/App';
// 导入getData
import getData from '@/utils/getData';

至此,我们已经简单的搭建出了 vue 项目,在项目中我们可能还会需要用到less,sass,字体图标等工具,针对这类工具 webpack 都有与其对应的loaderplugin,需要时搜索他们的文档即可。

参考文章

使用 webpack 手动搭建 vue 项目的更多相关文章

  1. webpack初步搭建Vue项目

    对文件进行打包 1. cnpm i -D webpack webpack-cli 本地热更新 1. cnpm i -D webpack-dev-server 处理图片资源 url-loader依赖fi ...

  2. 手动搭建Vue之前奏:搭建webpack项目

    手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...

  3. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  4. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

  5. vue-cli3 搭建 vue 项目

    vue-cli3 搭建 vue 项目 项目是在mac的环境下配置的 win的同学请移步[https://www.cnblogs.com/zhaomeizi/p/8483597.html] 安装 nod ...

  6. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  7. 搭建vue项目环境

    前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...

  8. 快速搭建Vue项目

    快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...

  9. Visual code 搭建Vue项目

    使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像  淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...

随机推荐

  1. 记录一些API(持续更新)

    //对response进行编解码URLEncoder.encode(string,"UTF-8");//ts检查checkbox是否为选中状态$event.target.check ...

  2. 重置GrindConrol焦点行FocusedRowHandle

    List<model> list=this.CurrentList; var selectModel=tempselectmodel; //找selectModel在list中得位置 va ...

  3. 内网渗透 day5-msf本地提权(windows)

    msf本地提权 目录 1. 利用uac提权 1 2. 绕过uac认证 2 3. 利用windows本地提权漏洞进行提权 4 1. 利用uac提权 前提与目标机建立会话连接 seach local/as ...

  4. [Docker镜像] 关于阿里云容器镜像服务的使用(以天池比赛提交镜像为例)

    最近在参加天池比赛,由于比赛需要使用阿里云容器镜像服务完成线上预测任务,所以花费了3-4天的时间了解并使用Docker完成相关镜像操作,在此分享下我学习的内容,以下是本文的目录结构: 介绍 镜像 容器 ...

  5. 虚拟DOM与diff算法

    虚拟DOM与diff算法 虚拟DOM 在DOM操作中哪怕我们的数据,发生了一丢丢的变化,也会被强制重建整预DOM树.这么做,涉及到很多元素的重绘和重排,导致性能浪费严重 只要实现按需更新页面上的元素即 ...

  6. Spring源码之FactoryBean的实现

    https://zhuanlan.zhihu.com/p/97005407 https://blog.csdn.net/qq_35634181/article/details/104507465 总结 ...

  7. property内置装饰器函数和@name.setter、@name.deleter

    # property # 内置装饰器函数 只在面向对象中使用 # 装饰后效果:将类的方法伪装成属性 # 被property装饰后的方法,不能带除了self外的任何参数 from math import ...

  8. 我的开源经历:为了方便处理三方 HTTP 接口而写的 Java 框架

    缘起 我以前公司需要在 Java 后台调用许多第三方 HTTP 接口,比如微信支付.友盟等等第三方平台. 公司内部还有很多服务是用世界最好语言写的,接口自然也只能通过 HTTP 接口来调用.于是日积月 ...

  9. 新鲜出炉!面试90%会被问到的Java多线程面试题,史上最全系列!

    前言 最近很多粉丝朋友私聊我说能不能给整理出一份多线程面试题出来,说自己在最近的面试中老是被问到这一块的问题被问的很烦躁,前一段时间比较忙没时间回私信,前两天看到私信我也是赶紧花了两天给大家整理出这一 ...

  10. Vegas技巧分享,如何实现5.1立体声道

    Vegas Pro 15除了有各种好用的功能之外,还可以使用此软件制作5.1立体声道的音乐.如果你家里有多个音箱,那么你再也不用担心找不到5.1声道的音乐了,Vegas完全可以帮你实现. 打开简体中文 ...