webpack中文网（webpack hot middleware）

本篇文章给大家谈谈webpack中文网，以及webpack hot middleware对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、webpack基本使用
• 2、vue编译打包速度优化
• 3、来自一位react新手的react入门须知
• 4、webpack使用HtmlWebpackPlugin进行cdn配置
• 5、一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
• 6、vue3多页面运行与打包

webpack基本使用

step1: 创建一个项目录

注意：项目名一般 不要带中文

step2: 创建 package.json

或者：

step4: 处理第三方文件

html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不薯早识别的高级语法:

总结：webpack可以做两件事情况：

step5: 配置入口文件和出口文件

每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和宏锋出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包：

step6: 实现自动打包编译

每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack

在 package.json 文件中配置命令：

在终端中执行命令：

注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。

改变文件引用路径：

执行上述命令后终端会有类似信息输出：

【 Project is running at 】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:\Users\yfb\Desktop\前端学习案例4.27\wabpack\Demo_1\src】——不是通过webpack打包的文件，则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_modules平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。

因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:

step7: 自动打开浏览器进行访问、配置端口号、指定托管的根蔽手晌目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）

在 package.json 中配置命令，并重启服务器：

step8: 使用 html-webpack-plugin 插件

使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。

安装 html-webpack-plugin 插件：

在 webpack.config.js 配置文件中配置插件：

html-webpack-plugin 插件的两个作用：

step9: 处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。

处理css文件：

处理less样式文件

vue编译打包速度优化

1、首先颂简在config文件夹下配置webpack.dll.config.js(内容如下)，要打包的模块的数组可以将神轿一些较大的依赖放进vendor中

2、在package.json的scripts加上

3、运行npm run dll就可以游樱肆生成vendor-manifest.json和vendor.dll.js

4、然后在index.html中引入vendor.dll.js

然后就可以正常的进行编译打包，会发现将更多的依赖放到vendor，打包速度越快

优化前

优化后

大概平均可以节省三分之一的时间。参考 webpack中文网

[img]

来自一位react新手的react入门须知

所有的html，css都山坦可以写在js中，这就是jsx的用法。

用于验证数据的类型是否是满足你的需要,不过我在现有的项目中没有特意的指定数据的propTyoe，因为这些都是前后端约定好的。

此用法如下图 ：

这个如同vue组件里面的props中的type：Array这个一样

这个与vue-router差不多，大家可以看文档。

react-router的中文官网 ： 中文官网

因为react与vue一样，都是使用vitural-dom，没有处理dom节点，从而大大提高了页面的渲染效率。

当你想要获取真实的dom节点的时候，可以使用ref，具体的使用，可以看阮一峰的react入门，我下面的todolist的demo里面也会涉及到。

不过在你使用无状态组件申明组件的时候，ref在这个组件中是不能使用的。

可以通过webpack安装各种依赖，我使用的最爽的一个就是react-hot-loader，就是热更新，非常好用。不过热更新其他的工具，比如 browser-sync ,下面是一些文档。

如vue的vue-cli脚手架， create-react-app ]( )，使用以上方法的话，与vue-cli脚手架工具类似

我自己的一些总结，单单学react是不难的，难的是要和一些工具混合来用，往往这个过程的成本最高。比如使用webpack构建，redux管理状态， redux-thunk 或者 redux-saga 来处理异步action。

还有一个很大的趋势就是前端变化很快，拿 react-router 来说，你举陆做了一个项目， react-router@2.0.0 是能完美跑起来的，但是换成了当换成了 react-router@3.0.0 ，基本上就跑不起来了，更何况现在的 react-router 已经出到4.0，

相应的 webpack 也是这样，当时一些开发者基于 webpack1.0 开发的，当webpack升到2.0的时候， webpack.config,js 里面的文件要重新配置了。现在 webpack 已经更新到了3.0。

2， 阮一峰的文档： react的入门 ，webpack的入门， react-router

3，react的一些框正唯顷架和一些轮子：

4，一个渐进的学react的demo。

里面基本上涉及到了，react入门的所有涵盖的知识，他都是自己搭的，没有使用脚手架工具。里面也涵盖了webpack的一些配置，对于新手学习蛮好的。

1，jquery、vue、react的todolist，最简单的

2，基于ant-dedign的一个react简单的demo

3,基于react写的一个简易大众点评的demo，里面用到了redux，mock，fetch，es6

webpack使用HtmlWebpackPlugin进行cdn配置

在前面的 文章 中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：

其中BootCDN 是 Bootstrap 中文网 支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，可以在线测试cdn是否正常，所以下面以 Bootcdn 为例说明。

在前段项目开发中，我们经常使用webpack进行项目搭建， 主要作用有两个，分别是

在webpack中使用cdn是在打包生成静态资源的时候做处理，主要原理是使用 html-webpack-plugin 动态插入cdn链接。

关于webpack的使用这里不做过多的介绍，将以vue--cli 2.x生成的默认项目为例做介绍

html-webpack-plugin 是webpack的一个插件，可以动态的创建和编辑html内容，在html中使用 esj语法 可以读取到配置中的参数，简化了html文件的构建。

我们这次主要是使用它来动态插入cdn链接，如link标签和script标签。

在线项目地址

vue-cli 2.x

创建名为 webpack-cdn-demo ，类型为webpack的 vue 项目，如果安装的vue-cli是3.x版本，命令不太一样，详细可看 vue-cli 3 。

安装依赖

启动项目

下面简单介绍一下目昌清拆录结构

其中build文件夹中的 webpack.prod.conf.js 是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。

在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。

在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。

注意安装时记得 -S ，它的作用是安装完后在 package.json 项目文件中插入记录，后续操作需要读取已安装模块

对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。

依次搜索出前面模块，结果如下

按照规耐枣律，得出cdn资源路径规则为

其他cdn服务商同理

使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

如果没有build/utils.js，可以在其他文件上添加，正含只要在后续步骤中能操作到就行

name 模块名称，与package.json同名

scope 模块作用域命名

js js地址

css css地址

这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery， 具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配 (目前没找到更好的做法)。

在webpack热启动本地调试的时候，我们可以使用cdn。

在 build/webpack.dev.conf.js 中，默认已经引入了 utils.js ，所以可以直接调用相关方法，如果是自定义的文件，记得引入。

我们可以往里面添加点自定义属性，方便在index.html中调用。 ，修改如下：

其中 cdnConfig 和 onlyCss 自定义属性，在html上通过 htmlWebpackPlugin.options 可以读取到。

更多html-webpack-plugin配置情况官网，这里暂时不需要更多。

在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。

注意此处的 externalModules ，后面用到，也就是比dev多的步骤。

加入和dev一样的两个配置，不过需要把onlyCss改为 true ，因为我们希望打包时不单单使用css。

webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是 ejs ，和asp.net，jsp，php类似。

通过 % % 和 htmlWebpackPlugin.options 用js遍历 插入 link标签和script标签。

ps: 修改了webpack配置，需要重启项目才会生效

打包项目

可以看到打包体积大大减小了

页面上也正确引入了cdn资源。

最后奉上git地址：

比悲伤更悲伤的分割线

原来两年前已经有人做了一个类型的webpack-cdn-plugin

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

先看这个表格：

是不是有了一个整体的感觉？我们再来详细的看一下。

官网：

vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。

vue-cli 用于创建 vue2 的项目；

@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。

使用起来还是比较繁琐的，首先要安装脚手架，然后使用 vue create hello-world 创建项目，具体的就不介绍了丛绝颂。

官网：

create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。

然后我们可以选择需要的各种插件：

官网：

使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动渗郑安装第三方插件，有点麻烦。

目前支持的模板预设如下：

官网：

rollup 是一种打包工具，特点就是，打的包非常精简，体积小。

官网是英文的，中文资料也比较少，不过好在常规用法可以参考 vite的官网。

尤雨溪在知乎的一次回答（ ）里提到：

webpack 是一个全能选手宏颂，啥都能干，只是有点复杂，对新手不太友好。

Rollup 是后起之秀，打包更简洁。

vite 把 rollup 变成了“开袋即食”，便于新手入门。

create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。

所以，想创建一个 vue3 的项目，首选 create-vue，非常方便快捷，建立的项目也可以统一风格。

vue3多页面运行与打包

前言

现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行嫌仿多喊者悔页打包操作。

VUE3多页面打包

方式一：webpack配置

webpack安装参考：[安装 | webpack 中文网]。

直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件郑正即可)，然后在配置文件内输入内容：

方式二：vue-cli配置

vue-cli目前已不提供vue.config.js配置文件，但是我们可以手动在package.json同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考 | Vue CLI：

vue3多页面直接运行

使用vue.config.js配置好后，直接使用npm run dev命令即可，对应vue的vue-cli-service serve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是/index,默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。

关于webpack中文网和webpack hot middleware的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。