vue webpack常用配置,vue3.0 webpack
本文主要详细介绍了webpack在Vue中的使用。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
1、什么是Webpack2、模块化进化AMDCMDES6模块3、安装Webpack4、用Webpack总结。
1、什么是Webpack
本质上，webpack是现代JavaScript应用程序的静态模块打包器。webpack在处理一个应用的时候，会递归地构建一个依赖图，这个依赖图包含了应用需要的每个模块，然后把所有这些模块打包成一个或者多个bundle。
Webpack是目前最流行的前端资源模块化管理和打包工具。它可以根据依赖关系和规则，将许多松散耦合的模块封装成满足生产环境部署的前端资源。您还可以编写按需加载的独立模块，然后在实际需要时异步加载它们。通过loader转换，任何形式的资源都可以作为模块使用，比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等。
随着移动互联网的大潮，越来越多的网站从网页模式进化到WebApp模式。它们运行在现代浏览器中，并使用HTML 5、CSS 3和ES 6等新技术来开发丰富的功能。网页不仅满足了浏览器的基本需求；WebApp通常是SPA(单页面应用)，各个视图异步加载，导致页面初始化和使用过程中加载的JS代码越来越多，给前端开发流程和资源组织带来了极大的挑战。
前端开发与其他开发工作的主要区别在于，前端是基于多语言多层次的编码和组织，其次，前端产品的交付是基于浏览器。这些资源通过增量加载运行到浏览器端。如何在开发环境中组织这些碎片化的代码和资源，并保证它们在浏览器端快速优雅的加载和更新，需要一个模块化的系统。这种理想的模块化系统是前端工程师多年来一直探索的难题。
2、模块化的演进
脚本标签
script src=module1.js/script
script src=module2.js/script
script src=module3.js/script
这是加载JavaScript文件最原始的方式。如果把每个文件看成一个模块，那么它们的接口通常是暴露在全局范围内，也就是定义在窗口对象中，不同模块的调用都在一个范围内。
这种原始的加载方式暴露了一些显而易见的弊端：
很容易造成全局范围下的变量冲突。只能根据脚本的编写顺序加载文件。开发人员必须主观地解决模块和代码库之间的依赖关系。大型项目中，各种资源难以管理，长期积累的问题导致代码库混乱。CommonsJS
服务器上的NodeJS遵循CommonsJS规范，其核心思想是允许模块通过require方法同步加载需要依赖的其他模块，然后通过exports或module.exports导出需要公开的接口
require(“模块”)；
要求(./module . js’)；
export . do stuf=function(){ }；
module.exports=someValue
1234
优点：
服务器端模块易于重用。在NPM有超过450，000个可用的模块包，这些模块包易于使用。缺点：
同步模块加载模式不适合浏览器环境。同步意味着阻塞加载。浏览器资源是异步加载的。多个模块实现：不阻塞无法并行加载。
服务器端NodeJSBrowserify，浏览器端CommonsJS实现，可以使用NPM的模块，但是编译打包的文件有一个很大的体积模块——web make，类似于Browserify，但是没有Browserify的前身Browserify wreq灵活。
AMD
异步模块定义规范实际上是一个主接口定义(id？依赖关系？工厂)；它应该在声明模块时指定所有依赖的依赖项，也应该作为形参传递给工厂，依赖的模块应该提前执行。
define(module ，[dep1 ， dep2]，functian(d1，d2){
返回someExportedValue
});
要求([模块，./file.js]，函数(模块，文件){ })；
1234
优点
适合浏览器环境的异步加载模块，可以并行加载多个模块缺点。
开发成本增加，代码读写困难，模块定义语义不通顺，不符合一般的模块化思维模式。这是一个折衷的实现实现。
RequireJScurl
CMD
Commons模块定义规范与AMD非常相似，保持简单，并与CommonsJS和NodeJS的模块规范保持很大的兼容性。
定义(功能(要求、导出、模块){
var $=require( jquery )；
var Spinning=require(。/旋转’)；
exports.doSomething=.
模块.导出=.
});
优点：
在附近，延迟执行可以很容易地在NodeJS中运行。缺点取决于SPM封装，模块加载逻辑偏向实现。
Sea.jscoolie
ES6模块
EcmaScript 6标准增加了JavaScript语言级别的模块架构定义。ES模块的设计思想是尽可能的静态，这样就可以在编译时确定模块的依赖关系和输入输出的变量。Commons JS和AMD模块只能在运行时确定这些东西。
导入“jquery”
导出函数do stuf(){ }
模块“local module”{ }
优点
易于静态分析，面向未来的Ecma脚本标准缺点
原生浏览器尚未实现该标准的new命令，Node JS新版本仅支持实现。
巴别大家期望的模块
该系统可以兼容多种模块风格，并且可以尽可能地利用现有代码。不仅JavaScript模块化，CSS、图片、字体等资源也需要模块化。
3、安装Webpack
WebPack是一个模块加载器和打包工具，可以处理和使用JS、JSX、ES 6、SASS、LESS、图片等各种资源作为模块。
安装：
npm安装webpack -g
npm安装webpack-cli -g
测试安装成功
webpack -vwebpack-cli -v
配置
创建webpack.config.js配置文件
Entry: entry file，指定WebPack使用哪个文件作为项目output: output的入口，并指定Web Pack将处理后的文件放在指定路径module: module中，用于处理各种类型的文件plugin:plugin，如热更新、代码重用等。resolve:设置路径为watch: listen，用于设置文件修改后直接打包。出口={
条目：，
输出：{
路径：，
文件名：“”
},
模块：{
加载程序：[
{测试：/\。js$/，\loade:}
]
},
插件：{}，
解析：{}，
手表：真的
}
运行webpack命令直接打包。
4、使用webpack
1.创建项目
2.创建一个名为modules的目录来放置JS模块等资源文件。
3.在modules下创建一个模块文件，比如hello.js，用来写js模块的相关代码。
//公开一个方法：sayHi
exports.sayHi=function(){
document . write( div hello web pack/div )；
}
在modules下创建一个名为main.js的entry文件，用于在打包时设置entry属性。
//需要导入一个模块，可以调用这个模块中的方法。
var hello=require(。/hello’)；
hello . sayhi()；
在项目目录中创建webpack.config.js配置文件，并使用webpack命令将其打包。
模块.导出={
条目：。/modules/main.js ，
输出：{
文件名：。/js/bundle.js
}
}
在项目目录下创建HTML页面，比如index.html，导入webpack打包的JS文件。
！声明文档类型
html lang=en
头
meta charset=UTF-8
Title疯狂神说Java/title
/头
身体
script src= dist/js/bundle . js /script
/body
/html
1.直接执行webpack在IDEA控制台中；如果失败，就用管理员权限运行它！
2.运行HTML来看看效果
说明
# parameter - watch用于监控变化。
网络包-手表
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。