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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
微信小程序支付前端源码
Aug 29 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
介绍一下28个JS常用数组方法
May 06 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 mssql 时间格式问题
2009/01/13 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
Cython 三分钟入门教程
2009/09/17 Python
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python日期的加减等操作的示例
2017/08/15 Python
python列表的增删改查实例代码
2018/01/30 Python
Django框架模板介绍
2019/01/15 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
keras.layer.input()用法说明
2020/06/16 Python
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
大学旷课检讨书
2014/01/28 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
临床护士自荐信
2014/01/31 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL