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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
vue内置指令详解
Apr 03 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
JS实现页面侧边栏效果探究
Jan 08 Javascript
JavaScript实现手风琴效果
Feb 18 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
文件上传程序的全部源码
2006/10/09 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
详解React中setState回调函数
2018/06/14 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
10张动图学会python循环与递归问题
2021/02/06 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
化学相关工作求职信
2013/10/02 职场文书
教师推荐信范文
2013/11/24 职场文书
酒店员工检讨书
2014/02/18 职场文书
车辆工程专业求职信
2014/04/28 职场文书
服装设计师求职信
2014/06/04 职场文书
公司任命书模板
2014/06/06 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
python热力图实现的完整实例
2022/06/25 Python