webpack4 Vue构建自己的Vue-cli项目流程共享

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

前言

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

最近一直在看webpack4，感觉自己知识浅薄。过去两天我一直在考虑cli配置。在一些其他人的实践的帮助下，我尝试自己构建vue项目。这里，我用的是webpack4版本。之前在网上搜过别人的vue项目，但是都是webpack3建的，所以写了这篇文章。如有错误或问题，请指出。

这篇关于webpack的文章不会说太多，请查看webpack文档

Github地址vue-MYCLI关于这篇文章

你的开始是我出版的动力！

先验知识

熟悉web pack 4，熟悉vue

构建基本骨架

npm初始化

安装webpack4

npm安装webpack webpack-cli -保存-开发

在开始之前，先体验一下环境

根目录新文件index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，Original-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title vue/title/head dy script src=' http 3360。/src/mian.js'/script/body/html根目录创建一个新文件src/main.js

console . log(‘我是主’)；

新文件webpack.config.js是在根目录中创建的

Const path=require ('path ')模块。exports={entry: '。/src/main.js '，output 3360 { path : path . resolve(_ dirname，dist)，filename 3360 ' index . js ' } } Package js文件

npx web pack-config web pack . config . js

你会看到一些错误，只要施工成功，就可以了

这表明环境没有问题

配置初始构建环境

开始安装真空装载机

npm i网络包vue vue-loader -D //-D是-保存-开发

安装完成后查看输出

提示安装依赖项

npm安装webpack css-loader -D

安装后创建新的src/app.vue

template div hello { { data } }/div/template script export default { data(){ return { data : ' vue ' } } }/script style scoped/style . vue文件无法直接运行，因此需要在webpack中配置loader。

这里参考老师上课的方法，html是用webpack生成的(后面会解释)

在根目录中创建一个新的index.js来删除index.html

从“vue”导入vue，从“导入应用程序”。/app . vue ' const root=document . create element(' div ')document . body . appendchild(root)new vue({ render :(h)=h(app)})。$ mount (root)重写webpack。

const path=require('path ')模块. exports={ entry : path . resolve(_ _ dirname，' src/index.js ')，//关于path模块，可以查看阮一峰的教程http://javascript.ruanyifeng.com/nodejs/path.html#toc0 output 3360 { path : path。解析(_ _ dirname，' dist ')。Filename :' index.js'}，模块： {rules : [{test :/\。vue $/，加载程序：' vue-loader'}]}}在包中添加脚本

build ' : ' web pack-config web pack . config . js '

控制台操作

npm运行构建

没有事故会报告错误

这里有两个问题，一个是模式没有指定，另一个是插件没有引用vue

我们需要重写webpack.config.js并在config中添加一行

Mode:“生产”，//暂时指定为生产环境

再次运行npm运行构建将报告一个错误，需要安装一个包

这个错误报告最初是在vue-loader中提示的，但是我不知道为什么现在不存在了，所以我在运行之前报告了一个错误

错误：[vue-loader]vue-template-编译器必须作为对等依赖项安装，或者必须通过选项传递兼容的编译器实现

安装vue模板编译器

npm安装vue-模板-编译器-D

再次运行npm运行构建

如果你无一例外地按照步骤去做，你可以在这里成功打包~ ~ ~ ~

我们需要验证文件是否打包正确，所以这里我们使用插件HtmlWebpackPlugin来帮助我们自动创建html文件，它在后续的哈希文件名中非常有用。详情见官方介绍。

npm安装html-网络包-插件-D

更改webpack.config.js代码

const path=require(' path ')const { vol ade plugin }=require(' view loader ')var html web package plugin=require(' html web package plugin ')；//341、341模块。出口={ : '生产'模式，//张惠玲张惠玲张惠玲条目3360路径。请解析_ _ dirname,' src/index。js ')//云娥路径(路径)韩升平？韩升平http://JavaScript。阮一峰。com/nodejs/path。html # TOC 0输出： {路径3330路径。解析_ _ dirname，' dist ')，文件名： '索引。js ' }，模块： {规则3330[{测试3330/\].view $/，loader 3330 ' view loader ' } }，外挂程式[新的飞行插件()、新的html网页包插件()]} NPM运行构建天啊，距离

哎哎哎哎哎哎哎哎哎哎

阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊阿祖伊视图(视图)慕容留我的天

朱庇特朱庇特阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹网页包我的天

范仲淹把范仲淹给范仲淹

朱塞佩阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑阿桑

菲奥纳菲奥纳菲奥纳菲奥纳（签名)，网络包绿筠小姐，嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯，阿俊阿俊阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜阿胜，阿云阿云阿云阿云阿云阿云阿云，

贺盛瑞贺盛瑞贺盛瑞网页包拜住拜住拜住工具合并贺盛德贺盛德贺盛德网页包我的天

npm i网络包合并-丁

朱庇特阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹

你好你好，web包绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石绿宝石

webpack.config.base.js

const path=require(' path ')const config={ entry 3360 path。解析_ _ dirname，'-什么/src/index.js)，输出3360 {路径3360路径。解析_ _ dirname，“dist”，文件名： '指数。js ' }，模块3330 {规则3360[{测试3330/\].view $/，loader : ' view loader ' } } }模块。导出=配置

网络包。配置。建造。jsconst { vol adeplugin }=require(' view loader ')const html web包插件=require(' html web包插件')const merge=require(' web包-merge ')const base config=require(')./web包。配置。base ')const config=merge(base config，{ plugin 3330[new flight plugin()、new htmlweb package plugin()]})模块。导出=配置

贺盛瑞阿阿阿中阿中阿中阿中阿中，安藤仁web包开发服务器

web包开发服务器云娥Node.js Express(节点。js快递)你好，绿姊姊绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐绿姐姐

是吗web包开发服务器

NPM安装网络包。配置。戴夫。jsconst web pack=require(' web pack ')const merge=require(' web pack-merge ')const base config=require(')./web包。配置。base ')const { vol adeplugin }=require(' view-loader ')const html web package plugin=require(' html-web package plugin ')const config=merge(base config，{ devserver : { port : ' 8000 '，host : ' localhost '，hot : true，//吴登盛（签名)//quiet: true //你是说.}、插件[新建飞行插件()，新建htmlwebpackplugin()，新建web包].hotmoduleenationplugin()]})模块。导出=配置你好包包包包包包包包包包包包包包包包包包包包包包包包包包包包包朱庇留莫措克

构建“3330”web包-模式=生产-配置构建/web包。配置。建造。js '，' dev ' 3330 ' web包-dev-server-mode=development-progress-config build/web包。配置。戴夫。js '

唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟新公共管理运行偏差吴经熊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

贺盛云，-你好-你好http://localhost:8000/，魏冄应用程序视图哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，是吴亚玲视图-cli林国荣林国荣我的天

安徒生，安徒生，安徒生，安徒生，安徒生，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，安享晚年，大兴哥。视图(视图)诶哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟加载程序，云娥网页包绿筠小姐

阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖阿祖加载程序，云娥CSS(CSS)什么事加载程序，哼哼哼CSS(CSS)僧曰postcss(电子邮件)贺盛瑞贺盛瑞

全球资源定位器(Uniform Resource Locator)载入器云娥与云娥base64档案载入器URI1590年装载机(加载程序)

NPM网址加载程序文件加载程序-丁

安盛苏梅网络包。配置。基地。jsmodule规则

{测试3330/\。(gif|png|jpg|svg)$/，使用3330[{加载器3330 ' URL加载器]，选项： { limit : 2048，name : ' resources/[path][name].[散列33636]。[ext]} } } }，我的天css(视图cli)朱庇特朱庇特阿齐兹阿齐兹，苏丹王苏丹王)何厚铧何厚铧何厚铧何厚铧

新公共管理安装钢性铸铁加载程序-Dnpm安装样式加载程序-Dnpm安装postcss加载程序-丁安盛苏梅网络包。配置。基地。jsmodule规则(发布CSS云娥？云娥)

{test:/\。CSS $/，use: ['CSS-loader '，' style-loader '，{ loader : ' post-CSS-loader '，options 3360 { source map 3360 true//启用源映射支持。postss-loader将使用其他加载程序给出的以前的源映射并相应地更新它}}] }npm install autoprefixer -D根目录创建一个新文件postss . config . js并安装autoprefixer(自动添加浏览器前缀)

const autoprofixer=require(' autoprefixer ')模块。exports={ plugins :[autoprofixer()]}这里配置了基本的图片和css。运行它并尝试npm运行开发

我在src下找到了assets/img/user.jpg。

app.vue

模板div hello { { data } } img src=' http :/assets/img/user . jpg '/div/模板脚本导出默认值{ data(){ return { data : ' vuecli ' } } }/script style div { font-size : 20px；颜色：红色；} img { width: 100px}/style

实现开发环境的图片和css的配置

打包试试

构建后生成的目录如下所示

这不是我们想要的。webpack将代码、类库和css打包在一起，这样无论是在线还是第一次屏幕加载都会产生影响，所以这里我们要优化webpack

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

Clean-webpack-plugin是一个不知道为什么的插件，如何配置路径也不起作用。

这里我使用rimraf来删除(vue-cli也使用rimraf，但它是在代码中编写的)

npm安装rimraf -D

更改包中的脚本，让我们在打包前删除包文件

build-web pack ' : ' web pack-mode=production-config build/web pack . config . build . js '，' delete': 'rimraf dist '，' build ' : ' NPM run delete NPM run build-web pack '

分离并打包css

它会移动所有的*。css引用的块(条目块来分隔CSS文件

npm安装[emailprotected] -D

因为开发环境不同于生产环境

我们需要在不同的环境中配置css代码

1.将原始css配置放入webpack.config.dev.js

2.在webpack.config.build.js中重写

module : { rule 3360 [{ test :/\。css$/，使用： ExtractTextPlugin . extract({ fallback : ' style-loader '，使用： [ 'css-loader '，{loader:' postcss-loader '，options 3360 { sourcemap 3360 true } } } } } })，在这种情况下，我们的开发环境并不影响之前的模式，在构建时，我们使用extract textplugin来帮助我们分离非js文件，实现css分离和打包

让我们打包并尝试npm运行构建

分离js文件

下一步是分离js文件，也就是把库文件从我们的代码中分离出来，这样有利于上线后的浏览器缓存。代码会经常变化，库也不会经常变化

在webpack4之前，用于js分离的插件是CommonsChunkPlugin，但是现在这个插件已经被移除了，现在optimization.splitChunks用于提取公共代码和第三方代码。分割块参数如下

优化： {拆分组块： {组块：' initial '，//代码块类型必须是三种类型之一：' ' initial' | 'all '(默认为all) | 'async '(动态加载)minsize : 0 0，//最小大小，Default 0 minChunks: 1，//最小组块，默认1 maxasyncrequests 3360 1，//最大异步请求，默认1 maxinitialrequests 3360 1，//最大初始化请求，默认1 name 3360 ()={}，priority :“0”，//缓存组优先级false | object | vendor: {//key是条目中定义的条目名称chunk 3360“initial”。//您必须从三项中选择一项：“初始“|”all“|”async”(默认情况下为异步)test: /react|lodash/，//常规规则验证，如果一致，则提取chunk name 3360“vendor”。//要缓存的分隔块名称为minsize: 0、minchunk: 1、enforce3360 true、reuestinghunk : true//您可以设置是否重用已使用的块，不会创建新的块。}}}}官方包含这个解释，所以我不是很懂，所以包装策略不是很好。

在webpack.config.build.jsconfig中

output : { filename : '[name]。[chunk has :8]。js' }，optimization : { splitchunk s 3360 { chunk s : ' all }，cachegroups 3360 { vendor : { test 3360/node _ modules/，//虽然这里是分开的，但是并不是按照要求导入的，官方的配置也不是很清楚。名称3360“供应商”，组块3360“全部”}}，运行时组块：真}检查一次目录，可以

至于eslint，我就不介绍了。如果我感兴趣，我可以讨论一下。被增加

在这里，处理新的git文件。被增加。ds _ store node _ modules//dist/NPM-debug.log *纱线-debug . log *纱线-error.log * #编辑器目录和文件. idea.vscode *。索*。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 _ trading _空格=true。还有一件事需要注意。如果不起作用，vscode需要为VS Code安装一个插件EditorConfig，其他编译器并不清楚。babelrc

处理ES6和js文件的webpack的加载器配置

今天我安装了babel-loader8.0.0报告了一上午的错误，我的心态崩溃了，所以在这里用7版

npm安装[email protected]babel-core babel-preset-env-D

在web pack . config . base . jsmodule les中添加代码。

{test:/\。js $/，exclude:/node _ modules/，loader:' babel-loader'}创建一个新文件。babelrc

{ '预设' : ['env' ]}首先检查开发环境

我用es6语法创建了一个新的js，并将其导入到app.vue中