WEBPACK

WEBPACK

若是你曾经遇到过如下任何一种状况：

1,载入有问题的依赖项

2,意外引入一些你不须要在生产中用上的css样式表和S库，使项目膨胀意外的两次载入（或三次）库（引入的css或者js 记载两次 而webpack只会加载一次 不会形成性能的浪费）

3,遇到做用域的问题—-CSs和lavaScript都会有寻找一个让你在JavaScript中使用（wepack能避免样式冲突）

4,Node/Bower模块的构建系统，要么就得依靠一个使人发狂的后端配置才能正确地使用这些模块（wepack正确使用模块，没必要担忧冲突）

5须要优化资产asset交付，但你担忧会弄坏一些东西等等……（webpack彻底依赖于模块的配置来打包，不会损坏模块文件）

6,那么你能够从Webpack中收益了。它经过让JavaScript轻松处理你的依赖关系和加载顺序，而不是经过开发者的大脑。最好的部分是，Webpack甚至能够纯粹在服务器端运行，这意味着你还可使用Webpack构建渐进加强式网站（webpack谁先引入谁 谁先加载谁）（同时webpack也能应用于客户端 因此能够应用于响应式布局、渐进式网站）

-----------------------------华丽的分割线-----------------------------------

wbpack是用于现代lavaScript应用程序的模块绑定器。 当Webpack处理您的应用程序时，它递归地构建一个包含应用程序所需的每一个模块的依赖关系图，而后将全部这些模块打包到少许的捆绑（一般只有一个），由浏览器加载。 这是很是可配置的，但要开始，您只须要了解四核心概念：输入，输出，加载程序和插件（加载器是解析静态资源文件的）

全局安装： npm install webpack webpack-cli webpack-dev-server-g

依赖安装： npm install webpack webpack-cli webpack dev-server-save-devQ

注意：vue-cli 是webpack 4的版本才出现的 webpack16年 没有 用vue-cli

jq最先的用的版本 1.7版本是变动最大的版本

----------------------------------华丽的分割线-------------------------

babel-loader负责解析 export defalt
es5写法 model.exports= new 同时 var str = require('./***.vue') 必须带./ 这是model的语法识别

npm 命令

1,webpack entry.js(入口文件) output.js (出口文件)

2,将入口文件打包为 出口文件 （如今不能用）

3,会报错 模式并未配置 这是webpack4以前用的 以后并不能用

webpack不只规范模块化 同时还能防止盗取

1,js模块建立，模块化开发-模块接收暴露

2,a.js暴露模块 module.exports=obj；|| export default obj；

3,b.js.接收模块，设置html须要功能require（"/xxis）II import obi from/xx.is'

4,打包输出文件

5,webwack b.js -o build.main.js一mode developnent（开发环境build）

6,wcback b.js -o build.main.is一mode production（生产环境bild）

7,Html引入输出的文件output.js

8,webpack entry.js -o output.js --mode production

-----------------------------------华丽的分割线-----------------------------

webpack的核心功能：就是把浏览器不认识的语言转换为它认识的语言 主要指babel 解析为js

----------------------------华丽的分割线-----------------------------------

webpack配置文件只能放在根目录下 webpack配置文件 webpack.config.js 文件名不能动

----------------------------------------华丽的分割线------------------------

webpack配置文件 5大核心：entry（入口） output（输出） mode（模块） loaders（加载器） plugins（插件） configuration(配置)
webpack 遵循commo.js规范
----------------------------------华丽的分割线------------------------------

知识点回顾盲点：node.js 中path用法 www.cnblogs.com/wulinzi/p/8…

第一次整理 若是有很差得地方还望指导