webpack4+Vue搭建自己的Vue-cli项目过程分享

2024-12-12 16:33:26

前言

对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛

最近在看webpack4，深感知识浅薄，这两天也一直在思考cli的配置，借助一些别人的实践，尝试自己搭建vue的项目，这里使用webpack4版本，之前我在网上查找别人的vue项目搭建,但是都是webpack3的,所以写了本文，如果有错误,或者有什么问题,请大佬们指出

关于webpack的本文不会多说，请看webpack文档

关于本文的github地址vue-MYCLI

你们的start是我发表的动力!!!!!

前置知识

•熟悉 webpack4
•熟悉 vue

搭建基本骨架

npm init

安装webpack4

npm install webpack webpack-cli --save-dev

在开始之前先实验一下环境

根目录新建文件 index.html

<!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>Vue</title>
</head>
<body>
 <script src="./src/mian.js"></script>
</body>
</html>

根目录新建文件 src/main.js

console.log("我是main");

根目录新建文件webpack.config.js

const path = require('path')

module.exports = {
 entry: './src/main.js',
 output: {
 path: path.resolve(__dirname, dist),
 filename: 'index.js'
 }
}

打包js文件

npx webpack --config webpack.config.js

会看到一些报错,只要构建成功就ok

这里说明环境是没有问题的

配置初始生成环境

开始安装vue-loader吧

npm i webpack vue vue-loader -D //-D就是--save-dev

安装完成后看输出

提示安装的依赖要安装

npm install webpack css-loader -D

安装完毕后新建src/app.vue

<template>
 <div>
 你好 {{ data }}
 </div>
</template>
<script>
 export default {
 data(){
  return {
  data: "Vue"
  }
 }
 }
</script>
<style scoped>
</style>

.vue文件是无法直接运行的,需要在webpack里面配置loader

这里参照某课的老师的方法,html用webpack生成(后面说明)

在根目录新建index.js 删除index.html

import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

改写webpack.config.js

const path = require('path')

module.exports = {
 entry: path.resolve(__dirname, 'src/index.js'), //关于path模块可以看看阮一峰的教程 http://javascript.ruanyifeng.com/nodejs/path.html#toc0
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'index.js'
 },
 module: {
 rules: [{
  test: /\.vue$/,
  loader: 'vue-loader'
 }]
 }
}

在package里面添加脚本

"build": "webpack --config webpack.config.js"

控制台运行

npm run build

不出意外会报错

这里有2个问题,一个是没有指定mode 一个是没有引用vue的插件

我们需要改写webpack.config.js,在config里面加一行

mode: 'production', //暂时指定为生产环境

再次运行npm run build 会报错,需要安装一个包

这个报错,原本在vue-loader就有提示,不知道为什么现在没有,运行之前报错

Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options

安装vue-template-compiler

npm install vue-template-compiler -D

再再次运行npm run build

假如按步骤来不除意外这里可以打包成功了~~~~

我们需要验证打包文件时候是否正确,所以这里使用插件HtmlWebpackPlugin,帮我们自动创建html文件,并且在后续的hash文件名上很有用,具体可以看官方介绍

npm install html-webpack-plugin -D

改webpack.config.js代码

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
module.exports = {
 mode: 'production', //暂时指定为生产环境
 entry: path.resolve(__dirname, 'src/index.js'), //关于path模块可以看看阮一峰的教程 http://javascript.ruanyifeng.com/nodejs/path.html#toc0
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'index.js'
 },
 module: {
 rules: [{
  test: /\.vue$/,
  loader: 'vue-loader'
 }]
 },
 plugins: [
 new VueLoaderPlugin(),
 new HtmlWebpackPlugin()
 ]
}

npm run build打包一下,dist文件夹下面会有两个文件

启动一个静态服务器

打包Vue程序完成~~~~

至此完成了最基本的webpack配置

接下来我们要完成的的配置开发环境

配置开发环境

关于开发环境以及生成环境,webpack是需要区分的,根据文档模块,我决定在命令里面指定模式,相应的就将开发环境以及生成环境分开,

这里我使用的是提起基本的webpack配置使用webpack-merge这个包来拼接我们webpack配置

npm i webpack-merge -D

修改配置文件

将各各环境的代码区分开,webpack的结构是这样的

webpack.config.base.js

const path = require('path')

const config = {
 entry: path.resolve(__dirname, '../src/index.js'),
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'index.js'
 },
 module: {
 rules: [{
  test: /\.vue$/,
  loader: 'vue-loader'
 }]
 }
}

module.exports = config

webpack.config.build.js
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')

const config = merge(baseConfig ,{
 plugins: [
 new VueLoaderPlugin(),
 new HtmlWebpackPlugin()
 ]
})

module.exports = config

这里配置开发环境就是重头戏了,我们使用webpack-dev-server

webpack-dev-server是一个小型的Node.js Express服务器,代码都跑在内存里面

安装webpack-dev-server

npm install webpack-dev-server -D
webpack.config.dev.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = merge(baseConfig, {
 devServer: {
 port: '8000',
 host: 'localhost',
 hot: true, //热加载
 //quiet: true //控制台中不输出打包的信息
 },
 plugins: [
 new VueLoaderPlugin(),
 new HtmlWebpackPlugin(),
 new webpack.HotModuleReplacementPlugin()
 ]
})
module.exports = config

最后在package里面添加脚本

"build": "webpack --mode=production --config build/webpack.config.build.js",
"dev": "webpack-dev-server --mode=development --progress --config build/webpack.config.dev.js"

执行npm run dev查看控制台

这就成功了,在浏览器里面输入http://localhost:8000/,修改app.vue文件,实现了vue-cli的热加载了~~~~

接下来完善一下,不能只有.vue文件的loader,其他的webpack也要认识

我们配置一下图片的loader,以及css的loader,同时css使用postcss进行预处理

url-loader 用于将文件转换为base64 URI file-loader是依赖loader

npm i url-loader file-loader -D

添加配置webpack.config.base.js>module>rules

{
  test: /\.(gif|png|jpg|svg)$/,
  use: [{
   loader: 'url-loader',
   options: {
   limit: 2048,
   name: 'resources/[path][name].[hash:8].[ext]'
   }
  }]
  },

配置css(vue-cli里面的实现非常友好,有机会可以去看看) 下面的是最简单的配置

npm install css-loader -D
npm install style-loader -D
npm install postcss-loader -D

添加配置webpack.config.base.js>module>rules (postcss不了解谷歌一下)

{
  test: /\.css$/,
  use: [
   'css-loader',
   'style-loader',
   {
   loader: 'postcss-loader',
   options: {
    sourceMap: true //启用源映射支持，postcss-loader将使用其他加载器给出的先前源映射并相应地更新它
   }
   }
  ]
  }
npm install autoprefixer -D

根目录新建文件postcss.config.js,安装autoprefixer (自动添加浏览器前缀)

const autoprofixer = require('autoprefixer')

module.exports = {
 plugins: [
 autoprofixer()
 ]
}

配置到这里基本的图片以及css就配置完成了,运行一下试试 npm run dev

我找src下面创建了assets/img/user.jpg

app.vue

<template>
 <div>
 你好 {{ data }}
 <img src="./assets/img/user.jpg">
 </div>
</template>

<script>
 export default {
 data(){
  return {
  data: "Vue Cli"
  }
 }
 }
</script>

<style>
div{
 font-size: 20px;
 color: red;
}
img {
 width: 100px;
}
</style>

实现了开发环境的图片以及css的配置

打包一下试试

build后生成的目录是这样的

这不是我们想要的,webpack把代码,类库,css都打包在一起,这样不管是上线还是首屏加载都有影响,所以这里我们要优化webpack

在处理之前想安装一个可以帮助我们每次build之前自动删除上次build生成的文件的插件

clean-webpack-plugin这个插件不知道为什么,怎么配置路径都没效果

这里我使用rimraf来进行删除(vue-cli也是使用rimraf,但是他是写在代码里面)

npm install rimraf -D

在package里面变一下脚本,让打包之前帮我们删除之前到打包文件

"build-webpack": "webpack --mode=production --config build/webpack.config.build.js",
"delete": "rimraf dist",
"build": "npm run delete && npm run build-webpack"

分离打包css

它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件

npm install extract-text-webpack-plugin@next -D

因为开发环境和生产环境不一样

我们需要将css部分的代码分环境配置

1.将原先的css配置放到webpack.config.dev.js里面

2.在webpack.config.build.js里面重写

module: {
 rules: [{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
  fallback: "style-loader",
  use: [
   'css-loader',
   {
   loader: 'postcss-loader',
   options: {
    sourceMap: true
   }
   }
  ]
  })
 }]
 },

这样的话,我们开发环境不影响依旧是之前到模式,build的时候用ExtractTextPlugin帮我们分离非js文件,实现css的分离打包

我们打包一下试试npm run build

分离js文件

接下来是分离js文件,就是将库文件以及我们的代码分离开,利于上线后的浏览器缓存,代码会经常变,库不会经常变

在webpack4之前js分离用的插件是CommonsChunkPlugin,不过这插件现在移除了,现在用的是optimization.splitChunks 来进行公共代码与第三方代码的提取,splitChunks参数如下

optimization: {
 splitChunks: {
  chunks: "initial",   // 代码块类型 必须三选一： "initial"（初始化） | "all"(默认就是all) | "async"（动态加载）
  minSize: 0,    // 最小尺寸，默认0
  minChunks: 1,    // 最小 chunk ，默认1
  maxAsyncRequests: 1,  // 最大异步请求数， 默认1
  maxInitialRequests: 1,  // 最大初始化请求书，默认1
  name: () => {},   // 名称，此选项课接收 function
  cacheGroups: {    // 缓存组会继承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置缓存组。
  priority: "0",    // 缓存组优先级 false | object |
  vendor: {     // key 为entry中定义的 入口名称
   chunks: "initial",  // 必须三选一： "initial"(初始化) | "all" | "async"(默认就是异步)
   test: /react|lodash/,  // 正则规则验证，如果符合就提取 chunk
   name: "vendor",   // 要缓存的 分隔出来的 chunk 名称
   minSize: 0,
   minChunks: 1,
   enforce: true,
   reuseExistingChunk: true // 可设置是否重用已用chunk 不再创建新的chunk
  }
  }
 }
 }

官方包括这解释,我并不是很看懂,所以打包策略并不是很好

在webpack.config.build.js>config

output: {
 filename: '[name].[chunkhash:8].js'
 },
optimization: {
 splitChunks: {
  chunks: "all",
  cacheGroups: {
  vendor: {
   test: /node_modules/, //这里虽然分离了,但是没有做到按需引入,看官方配置也不是很明白
   name: 'vendors',
   chunks: 'all'
  }
  }
 },
 runtimeChunk: true
 }

build一下查看目录,可以看出代码与库之间分离了

关于eslint,我就不引入的,有兴趣可以讨论一下

.gitignore

这里处理一下git 新建文件.gitignore

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
.editorconfig,

处理一下编译器的统一配置

新建文件 .editorconfig,(关于editorconfig,以及配置解释)

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

还有一点要注意,假如没有效果,vscode需要安装一个插件EditorConfig for VS Code,其他编译器不太清楚

.babelrc

处理一下ES6,以及js文件的webpack的loader配置

今天装了babel-loader8.0.0 报错报一上午,心态都搞崩了,所以这里我使用的是7版本

npm install babel-loader@7 babel-core babel-preset-env -D

在webpack.config.base.js>module>rules里面添加代码

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

新建文件 .babelrc

{
 "presets": [
 "env"
 ]
}

首先检查开发环境

我新建了一个es6语法的js 导入到app.vue里面

运行结果

最后

至此,基本的vue项目骨架的搭建完毕了,当然他没有vue-cli那么强大,或许最大的益处是让我们熟悉一个vue项目的大致webpack配置,当然我们可以一步一步的优化项目，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue-cli的webpack模板项目配置文件分析

由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser
详解vue-cli + webpack 多页面实例配置优化方法

本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,
windows下vue-cli及webpack搭建安装环境

1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm
vue+vuecli+webpack中使用mockjs模拟后端数据的示例

前言使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD
详解webpack+vue-cli项目打包技巧

1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js.css等的版本控制? 设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串以上就是本文的全部内容,希望对
webpack4+Vue搭建自己的Vue-cli项目过程分享

前言对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是webpack3的,所以写了本文,如果有错误,或者有什么问题,请大佬们指出关于webpack的本文不会多说,请看webpack文档关于本文的github地址vue-MYCLI 你们的start是我发表的动力!!!!
Windows下搭建apache、php、mysql过程分享

在windows下,apache和mysql都有自动化安装的程序,本篇则侧重从apache和php版本选择,php线程安全,apache和mysql安装启动服务,工作环境配置这几个方面来阐述windows下搭建apache+php+mysql过程. Apache下载地址:http://httpd.apache.org/download.cgi php下载地址:http://windows.php.net/download/ mysql下载地址:http://dev.mysql.com/downl
详解Maven 搭建spring boot多模块项目（附源码）

本文介绍了Maven 搭建spring boot多模块项目,分享给大家,具体如下: 备注:所有项目都在idea中创建 1.idea创建maven项目 1-1: 删除src,target目录,只保留pom.xml 1-2: 根目录pom.xml可被子模块继承,因此项目只是demo,未考虑太多性能问题,所以将诸多依赖.都写在根级`pom.xml`,子模块只需继承就可以使用. 1-3: 根级pom.xml文件在附录1 1-4: 依赖模块 mybatis spring-boot相关模块 2.创建子模块(
webpack4手动搭建Vue开发环境实现todoList项目的方法

前言平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t
Vue脚手架搭建及创建Vue项目流程的详细教程

目录 VUE脚手架搭建流程安装国内淘宝镜像安装 Vue 脚手架 Vue项目创建项目结构解读项目修改测试总结 VUE脚手架搭建流程 1.安装 Node.js(推荐一个网站:http://nodejs.cn/) 2.下载安装完成之后进行测试,记住安装位置 node -v 测试 node 是否安装成功以及检查 node 版本 npm -v 测试 npm 是否安装成功以及检查 npm 版本效果: 提示:如果碰到下面情况可能原因: 可能是C:\Users\Administrator(user
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互一.模块的安装 npm install axios --save #--save可以不用写二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro
详解用Docker搭建Laravel和Vue项目的开发环境

本文介绍了用Docker搭建Laravel和Vue项目的开发环境,分享给大家,具体如下: 在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器里),加入Vue只是因为有的项目里会在Laravel项目中使用Vue做前后端分离开发,开发环境中需要安装前端开发需要的工具集,当然前后端也可以分成两个项目开发,这个话题不在本篇文章的讨论范围内. 所以我们的目标
利用Vue3 创建Vue CLI 项目（一）

目录一.官方文档二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用三.Vue CLI项目结构讲解一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re
利用Vue3 (一）创建Vue CLI 项目

目录一.官方文档二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用三.Vue CLI项目结构讲解一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re
安装node.js以及搭建vue项目过程中遇到的问题详解

目录一.node.js安装二.如何找node.js历史版本 1.点击DOWNLOADS 2.点击页面下方 3.翻页找到历史版本三.检查是否安装成功? 四.安装成功后需要配置环境变量: 五.环境搭建六.项目创建总结一.node.js安装进入官网 https://nodejs.org/en/download/ 直接点击下载安装!安装过程直接下一步就行: 二.如何找node.js历史版本 (https://nodejs.org/en/download/) 1.点击DOWNLOADS 2.

webpack4+Vue搭建自己的Vue-cli项目过程分享

相关推荐

随机推荐