9102年webpack4搭建vue项目的方法步骤


Posted in Javascript onFebruary 20, 2019

前言

首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于webpack搭建vue的博客。因为公司使用vue比较多,构建vue项目使用vue-cli显得有点臃肿,感觉还是自己配置比较好些,所以就有了这篇教程。由于水平有限,欢迎大家指正,一起进步。

新建项目

1.新建名为webpackconfig文件夹

2.使用命令

npm init -y

在webpackconfig文件夹中生成package.josn

3.下载依赖包

npm i webpack webpack-dev-server webpack-cli -D

4.新建src文件夹并在src中创建main.js文件

alert(1)

5.新建webpack.config.js文件

webpack.config.js文件

var path = require('path');
var config = { 
    entry: './src/main.js', 
    output: {  
     path: path.resolve(__dirname + '/dist'),//打包生成文件地址  
     filename: '[name].build.js',//生成文件ming
     publicPath: '/dist/'//文件输出的公共路径
 }
}
module.exports = config;

entry: 引入文件,对象写法可以引入多文件

entry: {
 app: './src/app.js',
 vendors: './src/vendors.js'
 }

output:文件输出地址

path: 输出文件地址

filename:输出文件名

publicPath:文件输出路径

6.新建一个index.html文件并引入main.js

<!DOCTYPE html><html lang="en">
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>Document</title>
</head>
<body> 
 <script src="/dist/main.build.js"></script>
</body>
</html>

7.配置package.json

"dev": "webpack-dev-server --open --hot", 
"build": "webpack --mode=development --progress --hide-modules",

配置之后运行

npm run dev

会打开一个服务并弹出1

但是webpack会有一个警告,这个警告就是因为没有配置mode,就是没有配置相应模式

mode有两个参数,一个是开发模式development一个是生产模式production。

可以在package.json里直接配置

"dev": "webpack-dev-server --mode=development --open --hot"

这样就没有警告了

接下来运行

npm run build

会打包生成一个新的dist文件夹

9102年webpack4搭建vue项目的方法步骤

8.引入loader兼容代码

npm i babel-loader babel-core babel-preset-env -D

babel-preset-env 帮助我们配置 babel。我们只需要告诉它我们要兼容的情况(目标运行环境),它就会自动把代码转换为兼容对应环境的代码。

更改webpack.config.js文件

module: {
 rules: [
  { 
   test: '/\.js$/',
   include: path.resolve(__dirname + '/src'),
   exclude: /node_modules/,
   use: [
    {
     loader: 'babel-loader',
     options: ['env']
    }
   ]
  }
 ]
}

9.下载vue并在main.js引入

import Vue from 'vue';
new Vue({ 
 el: '#app', 
 data: {  
  msg: 'hello' 
 }
})

运行项目发现报错

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

报这个错误原因就是因为使用的是运行版本的vue,编译版本不能用,这时候在我们需要随后我们还要配置别名,将 resolve.alias 配置为如下对象

resolve: {  
 alias: {   
 'vue$': 'vue/dist/vue.esm.js',   
 '@': path.resolve(__dirname, '/src')  
 } 
}

然后在运行项目,发现已经在页面上打印出了hello。

一个简单的基于webpack的vue项目已经搭建好了。

接下来就是一些配置

10.配置css

输入命令下载style-loader css-loader

npm i style-loader css-loader -D

配置module中的rules

{ 
 test: /\.css$/, 
 use:['style-loader','css-loader'], 
 include: path.resolve(__dirname + '/src/'), 
 exclude: /node_modules/
}

测试引入css,新建index.css并在在main.js中引入

index.css

div{ 
 color:skyblue;
}
import './index.css';

可以看到文字颜色已经改变了

9102年webpack4搭建vue项目的方法步骤

11.支持图片

输入命令下载file-loader url-loader

npm i file-loader url-loader -D

配置module中的rules

{ 
 test: /\.(jpg|png|gif|svg)$/, 
 use: 'url-loader', 
 include: path.resolve(__dirname + '/src/'), 
 exclude: /node_modules/ 
}

测试引入图片,新建asset文件夹放一张图片并在在main.js中引入

import img from'./assets/a.png'

在html中显示

<img :src="img" alt="">

9102年webpack4搭建vue项目的方法步骤

12.引入html-webpack-plugin

输入命令下载html-webpack-plugin

npm i html-webpack-plugin -D

设置plugins

var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ 
 new HtmlWebpackPlugin({ 
 template: './index.html', 
 chunks: ['main']    
 })
]

13.vue开发需要.vue文件只要引入vue-laoader和vue-template-compiler就行了

输入命令下载vue-loader vue-style-loader vue-template-compiler

npm i vue-loader vue-style-loader vue-template-compiler -D

配置vue-loader

{ 
 test: '/\.vue$/', 
 loader: 'vue-loader'
}

还需要引入vue-loader/lib/plugin

var VueLoaderPlugin = require('vue-loader/lib/plugin');

并在plugin实例化

new VueLoaderPlugin()

新建App.vue

<template> <h1>Hello World!</h1></template>
<script> export default { name: 'App' }</script>
<style></style>

更改main.js

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

运行项目

9102年webpack4搭建vue项目的方法步骤

14.开启js热更新

因为 vue-style-loader 封装了 style-loader,热更新开箱即用,但是 js 热更新还不能用,每次修改代码我们都会刷新浏览器,所以我们需要继续配置。

const webpack = require('webpack');

并在plugin中配置

new webpack.HotModuleReplacementPlugin()

热更新已静开启

到现在为止webpack构建的vue项目已经跑起来了。

接下来就是一些优化,

15.在resolve配置别名

resolve: { 
 extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'], 
 alias: {  
 'vue$': 'vue/dist/vue.esm.js',  
 "@": path.resolve(__dirname, 'src'),  
 "components": path.resolve(__dirname, '/src/components'),  
 "utils": path.resolve(__dirname + '/src/utils'),  
 },  
 modules: ['node_modules'] 
}

16.支持sass

输入命令下载sass-loader node-sass

npm i sass-loader node-sass -D

修改webpack.config.js的css

{ 
 test: /\.sass$/, 
 use:['vue-style-loader', 
  'css-loader', 'sass-loader' 
 ], 
 include: path.resolve(__dirname + '/src/'), 
 exclude: /node_modules/ 
},

基本也配置个差不多了,还需要补充一些东西,以后会加上。

这一篇算是webpack构建vue项目基础吧,下一篇会再次补充并深入,谢谢大家,希望大家能多提意见,一起在码农的道路上越走越远

感恩骗点star项目地址 https://github.com/mr-mengbo/webpackconfig

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
在微信小程序中使用图表的方法示例
Apr 25 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 #Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 #Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 #Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 #Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 #Javascript
详解关于element级联选择器数据回显问题
Feb 20 #Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 #Javascript
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
php curl发送请求实例方法
2019/08/01 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
angular共享依赖的解决方案分享
2020/10/15 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
复制粘贴功能的Python程序
2008/04/04 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
个人现实表现材料
2014/02/04 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
竞聘演讲稿
2014/04/24 职场文书
松材线虫病防治方案
2014/06/15 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
mysql优化
2021/04/06 MySQL
pytorch 如何使用float64训练
2021/05/24 Python
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
Java 定时任务技术趋势简介
2022/05/04 Java/Android