webpack4:手工构建Vue开发环境实现todoList项目的方法

前言

通常，在工作开发中，为了效率，我们通常会直接使用Vue-cli支架来构建Vue开发环境。这个工具确实为我们节省了很多时间，但是你有没有想过如何构建Vue开发环境？如果你自己建造它，你能顺利建造它吗？

基于这些想法，我修改了webpack4，并完成了这个小项目。感觉一个小项目的收条挺大的，就把文章重新写了一遍，分享了一下心得，哈哈！

基于个人时间和精力问题，本项目教程分为两部分：

Webpack4手动构建Vue开发环境(本文)手动构建Vue项目文件夹实现todoList(包括Vue族桶)。希望你能看完教程，收到你想要的东西。嘻嘻，好了，开始吧！

首先，构建一个网络包运行环境

鉴于文章的篇幅，本教程将不详细描述webpack4的知识点。如果对搭建步骤有疑问或者不能理解知识点，可以先自己谷歌一下。我会悄悄告诉你，webpack4还有很多坑，但所谓的进步就是不断踩坑(捂脸)！

初始化项目

在命令行上运行npm init -y初始化项目，生成package.json文件

安装webpack依赖项

npm i网络包网络包-cli -保存-开发

建立基本项目目录

Webpack.base.dev.js基本配置

修改脚本命令

修改package.json文件中的脚本配置

运行网络包

在main.js中输入document.write('Hello World ')

根据上图，配置webpack.base.dev.js文件

在命令行上运行npm run test命令，js文件将在dist文件夹中生成

在index.html引入，如果Hello World成功导出，则证明webpack运行环境配置成功.

第二，开始构建Vue环境

Vue运行环境分为开发环境和生产环境。不同的环境对实现功能有不同的要求。比如生产环境需要压缩代码，开发环境需要sourceMap方便调试，这两个环境也有共同的配置！

接下来，我将慢慢谈论在不同环境中需要实现的功能

在生成中创建新文件

Webpack.base.conf.js公共配置文件webpack.dev.conf.js开发环境配置文件webpack.prod.conf.js生产环境配置文件公共配置文件

Webpack.base.conf.js是一个公共配置文件，需要实现以下功能：

字体处理、图片处理、Vue文件的优化识别，实现了babel转码，解析了package.json文件中ES6转换后的打包html模板配置、ES5代码、音乐文件处理配置。脚本配置运行脚本命令：

测试“:”web pack-config build/web pack . base . conf . js

在命令行上运行npm run test以运行webpack.base.conf.js配置文件

开发环境配置文件

Webpack.dev.conf.js是一个开发环境配置文件，主要关注调试效率：

打包css和更少的文件，设置sourceMap方便定位和调试。postss-loader自动添加前缀配置。devServer启动热更新功能。package.json文件中的脚本配置并运行脚本命令：

dev ' : ' cross-ENV NODE _ ENV=development web pack-dev-server-inline-progress-config build/web pack . dev . conf . js '

运行npm在命令行上运行dev以运行webpack.dev.conf.js配置文件

生产环境概况

Webpack.prod.conf.js是一个生产环境配置文件，主要关注压缩代码和性能：

打包和处理css和更少的文件迷你css-提取-插件撤回样式自动添加前缀到单个css文件postcss加载器清理-网络包-插件每次打包和清理创建的dist文件夹优化-CSS-资产-网络包-插件压缩CSS文件。代码压缩插件压缩JS文件代码。package.json文件中的脚本配置并运行脚本命令：

build ' : ' cross-ENV NODE _ ENV=production web pack-config build/web pack . prod . conf . js '

运行npm在命令行上运行build以运行webpack.prod.conf.js配置文件

第三，构建公共配置文件功能

上面列出了三个配置文件中要实现的功能。现在只需根据功能进行构建和配置。好了，走吧！

在webpack.base.conf.js中启动公共配置功能

配置处理字体、图片和音乐的功能

处理字体、图片和音乐需要安装相关的依赖项

NPM I URL-加载程序文件-加载程序-保存-开发

配置代码如下

const path=require(' path ')；module . exports={ entry : path . resolve(_ _ dirname，'./src/main.js ')，output : { filename : ' js/[name]。[hash:5]。js '，path : path . resolve(_ _ dirname '，/dist ')，publicPath: '。/' }，module : { rule : [{ test :/\。(png|jpe？g|gif|svg)(\？*)?$/，use :[{ loader : ' URL-loader '，options: { limit: 10000，name : ' img/[name]--hash :5]。[ext]'，} } ] }，{ test: /\。(woff2？|eot|ttf|otf)(\？*)?$/，loader: 'url-loader '，options: { limit: 10000，name : ' fonts/[name]-[hash :5]。[ext]'，} }，{ test: /\。(MP4 | webm | ogg | MP3 | wav | FLAC | AAC)(\？*)?$/，use :[{ loader : ' URL-loader '，options3360 {limit: 4096，name : ' media/[name]-[hash 33605]。[ext]'，}}]]}，}网址加载器和

它们之间的关系是url加载器封装了文件加载器，但是url加载器不依赖于文件加载器

url加载器可以根据限制属性处理图片。当图片大小小于限制(单位：字节)时，转换为base64，大于限制时，调用文件加载器处理图片。

ES6转换ES5代码

在这里，我吐出我的苦水。当我学会使用babel来配置ES6转换代码时，我真的花了很多时间来配置它。我想不出许多装载机(捂着脸)之间的关系。后来看官网的博客和别人的博客才看得清楚~ ~ ~好了，走吧！

首先，安装相关的加载程序

NPM I babel-loader @ babel/core @ babel/poly ill @ babel/preset-env[email protected]-save-dev

Babel-loader只支持ES6语法转换，不支持新增的API babel-polyfill，这样客户端就可以支持babel-preset-env。可以配置一个js兼容的运行环境babel-core，将JS代码解析成ast，方便每个插件解析语法和处理相应的配置代码

该配置仅支持ES6语法转换，不支持ES6新增API

在条目文件main.js中添加import @ babel/poly ill

这样就可以使用ES6新增加的API了，但是你会发现打包的JS文件比较大，还有很多ES6的API是你不用的，所以这个时候需要根据需要引入

在根目录下创建babel.config.js文件，并在其中设置配置

好的，这个可以按需引入，可以大大减少打包好的JS文件的大小。嗯嗯，终于整理出知识点了(捂脸)(苦脸)~ ~ ~

配置打包的Vue文件

首先安装依赖项

NPM I vue vue-加载程序vue-模板-编译器-保存-开发

在src文件夹中创建新的Vue文件App.vue

将Vue引入main.js入口文件，并将其安装在节点上

好，开始打包Vue文件的配置

很好。我觉得打包Vue和挂载节点的代码还是挺明智的

配置html模板页面

安装依赖关系

NPM I html-web pack-插件-保存-开发

使用html-webpack-plugin创建html页面，并自动导入打包生成的文件

const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；plugins :[新html webpackplugin({ template : path。resolve (_ _ dirname '，/index.html ')、filename :' index.html'})，]可以查看npm文档进行具体配置

https://www.npmjs.com/package/html

配置解析模块解析

配置别名方便路径的检索效率以及配置文件默认扩展名

解析： {扩展3360[].js '，' .json '，' .vue']，别名： { ' @ ' :路径。resolve(_ _ dirname '，/src') } }'@': '指向科学研究委员会文件夹'

好了，到这里为止，已经完成了配置文件的公共部分了，接下来开始针对环境进行配置了！

在命令行上运行新公共管理运行测试，可以运行公共配置文件

四、生产环境配置

好了，直接开敲！

在webpack.prod.conf.js文件里面进行配置

定义环境变量

工具里面提供了定义替换插件可以方便定义环境变量

plugins: [新网络包.define plugin({ ' process。env ' : { NODE _ ENV: JSON。stringify(' production ')} })，]，处理钢性铸铁和较少的文件

生产环境处理钢性铸铁和较少的文件需要把钢性铸铁样式提取出来到一个独立的钢性铸铁文件里面

并且自动添加前缀，sourceMap

处理钢性铸铁和较少的文件

NPM一号少加载器少加载器-保存-开发

自动添加前缀

NPM我发布CSS-加载程序自动修复-保存-开发

提取钢性铸铁样式到独立钢性铸铁文件

NPM一号迷你CSS-提取-插件-保存-开发

篇幅过长，无法截图，直接上代码

const webpackConfig=require(' ./web pack。基地。conf’)；const merge=require(' web pack-merge ')；const web pack=require(' web pack ')；//抽离半铸钢钢性铸铁(铸造半钢)样式const miniss tract plugin=require(' mini-CSS-extract-plugin ')；模块。导出=合并(WebPakconfig，{ mode: 'production '，devtool: '廉价-源-映射，模块： {规则3360[{测试：/\ .(c|le)ss$/，使用： [{ loader : minisextractlingplugin。加载程序，选项： {公共路径： './' } }，{ loader: 'css-loader' }，{ loader : ' postss-loader '，选项： { ident : ' postscs '，sourceMap: true，plugins : loader=[require(' autoprefixer ')({ browsers :['最后2个版本，% 1 ']})} }，{ loader : ' less-loader ' } } } } }，plugins 3333:css '，chunk filename : ' CSS/[id]-[hash :5].css '，})，]，}清理打包创建文件夹

打包过程中你会发现每次打包后距离文件夹都会不断增加文件，显然这个方面我们需要处理

安装相关依赖

国家预防机制一清理-网络包-插件-保存-开发

//清理dist const cleanwebpackkplugin=require(' clean-web pack-plugin ')；插件：[新的CleanWebpackPlugin()，]，压缩射流研究…和钢性铸铁代码

压缩钢性铸铁代码

国家预防机制一优化-CSS-资产-网络包-插件-保存-开发

压缩射流研究…代码

NPM一简洁-网络包-插件-保存-开发

使用方式

优化： {最小化r : [//压缩钢性铸铁新的optimizecsesswebpackplugin({ })，//压缩JS new TerserWebpackPlugin({ cache : true，parallel: true，sourceMap: true，})，//具体更多配置可以查看官网] }在命令行上运行新公共管理运行构建可以运行开发环境配置文件

好了，说完开发环境的配置，接下来到生产环境的配置了

五、开发环境配置

在webpack.dev.conf.js文件里面进行配置

有点小累（捂脸)

定义环境变量

跟生产环境一样，首先也是要定义环境变量

新的网络包define plugin({ ' process。env ' : { NODE _ ENV: JSON。stringify(' development ')} })，处理钢性铸铁和较少的文件

开发环境下的钢性铸铁和较少的不需要提取样式，只需要添加前缀和sourceMap方便调试

安装依赖

处理钢性铸铁和较少的文件

国家预防机制一样式-加载器CSS-加载器较少-加载器较少-保存-开发

自动添加前缀

NPM我发布CSS-加载程序自动修复-保存-开发

const webpackConfig=require('。/web pack . base . conf . js ')；const merge=require(' web pack-merge ')；const path=require(' path ')；const web pack=require(' web pack ')；module . exports=merge(web pack config，{mode:' development '，//source-map，将编译后的代码映射到原始代码，以便在报告错误后定位错误devtool: 'inline-source-map '。module : { rule 3360 [{ test :/\。(c|le)ss$/，use :[{ loader : ' style-loader '，options : { sourceMap: true } }，{ loader: 'css-loader '，options : { source map : true，}，{ loader: 'postcss-loader '，options: { ident: ' postcss '，source map : true，plugins : loader=[loader

webpack可以开启热更新模式，大大加快了效率。

安装相关依赖项

npm i网络包-开发-服务器-保存-开发

上层代码

//请参考官方网站devserver : { contentbase : path . resolve(_ _ dirname，'./dist ')，//hot:true，port: 9090，Overlay : {warnings : true，errors : true}，public path : '/' } plugins 3360[//启用模块热替换(HMR)newwebpack . hotmodulepreplacement plugin()，//打开HMR时，插件会显示模块的相对路径，这是开发环境推荐的路径。Newwebpack。namemodulesplugin()，]，所以可以在线调试，无需手动刷新！嘻嘻

好了，开发环境的配置完成了

在命令行上输入npm run dev以运行生产环境配置文件

不及物动词摘要

整个Vue开发环境配置好之后，感觉学到了很多，对webpack4功能的配置也有了大致的了解

虽然和Vue-cli相比还是差远了，但是有时候弄点小东西折腾一下感觉还是不错的！

好了，本文到此结束，因为我的水平有限，如有错误，请及时指出，互相进步，哈哈！谢谢各位大佬(笑脸)

在下一篇文章中，我将使用这个Vue开发环境来编写todoList项目

相信大家对todoList都不陌生，但是同一个项目可以用不同的方式编写，所以在下一篇文章中，我会继续手动构建Vue文件夹，手写，使用vue-router。vuex意识到这一点。相信对大家都有帮助。好了，结束！

Github源代码：https://github.com/Zero-jian/webpack

下一篇文章手动构建Vue项目，未完待续~ ~ ~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。