9102年webpack4搭建vue项目
前言
首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于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',//生成文件mingpublicPath: '/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文件夹
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';复制代码
可以看到文字颜色已经改变了
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="">复制代码
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)});复制代码
运行项目
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项目地址github.com/mr-mengbo/w…
9102年webpack4搭建vue项目相关推荐
- webpack4搭建vue项目(完整版本)
最近研究了下webpack4,顺便用webpack 4搭建了一个vue项目,搭建过程如下: 1.安装node,然后使用npm init (初始化项目): npm init 2.npm i webpac ...
- webpack4 搭建 Vue 开发环境笔记
一.node 知识 __dirname: 获取当前文件所在路径,等同于 path.dirname(__filename) console.log(__dirname); // Prints: /Use ...
- 从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
- webpack搭建vue项目(不用脚手架)
webpack搭建vue项目(不用脚手架) npm默认安装的是最新版本,这里讲的是Webpack4用法,如果遇到问题请检查是否是版本问题 webpack5升级了一些东西,例如图片的打包 1.初始化项目 ...
- Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的 脚手架. 二.vue-cli安装.更新 安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
- MAC电脑使用vue-cli脚手架搭建vue项目;mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇
- 搭建 vue项目(Windows + 命令行 + vsCode)
1.win键 + R ,输入CMD打开命令行. 2.输入node -v 查看node.js是否安装,如果输出版本号,则进行下一步,否则安装node.js. 下载地址:https://nodejs.or ...
- 搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单 默认点击安装 ...
- 关于搭建Vue项目的顺序及遇到的问题
关于搭建Vue项目的顺序 前言:笔者在搭建Vue项目中遇到了许多问题,当最后解决的时候,仍然对这个过程的来龙去脉极为模糊,在这里从最开始搭建nodejs开始到最后Vue项目搭建完成进行一个一条龙的总结 ...
最新文章
- 当了十年 IT 程序员,我转型做自动驾驶开发的这五年”_《新程序员》编辑部的博客-CSDN博客
- android 数据传递详解(Serialization、Parcelable、Parcel、Intent、Bundle)
- 作为怀孕的亲历者,你觉得最值得分享的经验或者技巧是什么?
- 【深度学习】超级赞!N个神经网络可视化利器
- 【内核模块auth_rpcgss】netns引用计数泄露导致容器弹性网卡残留
- 【专升本计算机】甘肃省普通高等学校专升本考试计算机全真模拟试卷(一)
- python可以在linux运行_服务器(Linux)上运行python总结
- 望图知意-Yahoo VS 3721
- 【SpringBoot与SpringCloud的一些根本】
- 使用Weka进行数据挖掘
- Android真机连接Eclipse时,打不开File Explorer下的data文件夹解决方法
- java个人博客系统源码_Java基于SSM的个人博客系统(源码 包含前后台)
- 中国专利申请CPC客户端软件问题解决方案
- 本人CSDN资源重传、0积分获取的方法以及重要声明(长期有效)
- Xcopy 复制文件和目录,包括子目录。
- 南京师范计算机科学研究生分数线,2020南京师范大学考研复试分数线已公布
- qtcreator编译qt程序是如何调用moc的,如何通过pro文件向moc传入参数
- linux开源游戏_适用于Linux的5个开源策略和模拟游戏
- Linux下误删除文件的各种恢复工具
- Elasticsearch——Bboss
热门文章
- LSOF 安装与使用(功能强大)
- (翻译) MongoDB(13) 在 Ubuntu 上安装MongoDB社区版
- What's going to be? 2016-Oct-12
- 95、Jenkins部署.net持续集成自动化测试环境
- mysql 5.1 禁用innodb
- 基本类型和引用类型的传值
- [歌曲]心愿(by 四个女生)
- 为什么plotly被称为“有史以来最牛逼”可视化神器?
- phpcms v9 为分类和内容添加伪静态
- 搭建yum仓库定制rpm包