三大主流框架都是基于webpack的
webpack is a static module bundler for modern JavaScript applications.
静态 模块化 打包 服务现代JS
webpack把很多不同样式的代码打包成浏览器能够识别的代码,从而让浏览器进行使用
有很多代码模块产生从而便于开发者进行开发,浏览器对能够获取的内容进行约束,webpack把不受约束的代码打包成受约束的代码
node安装之后,就自动配备了npm;
两种不同的导入方式分别对应不同引入方式,它们是ES module和CommonJS
package.js是进行npm init产生的,用来存放版本信息,进行包依赖的管理;
局部安装之后会产生package-lock.json包,来记录局部安装的版本号;
npm install后面跟需要安装的包,加上--D(--save-dev的简写)相当于保存到用户使用阶段,如果不加就是不保存;
node_modules用来存放一些webpakc依赖的包,npm run 名称,在脚本里面运行该内容;
npx提供一个优先在bin路径下寻找的方法;
形式为npm run 脚本定义名称,实际是去寻找依赖包中对应的内容并运行;
webpack打包的时候,默认去找src下的index.js文件进行打包,如果名称不一致,就通过npx webpack --entry ./src/main.js --output-path ./build;
打包开始是目录下找到src路径的index.js,开始进行打包,webpack.config.js用来配置打包开始和结束的位置,通过使用path的__dirname,直接获取到文件所在的绝对路径;
绝对路径指的是从文件的根目录出发到所需路径,会长一些,相对路径是指从当前文件到达所需路径的位置,会简单一些;
依赖需要放到webpack.config.js里面,同时需要按照调用依赖的顺序进行;
loader的加载顺序是从下往上的,加载loader是有顺序的,需要根据使用的顺序进行相应的配置,
同时使用多个loader的话,通过rules:[],test:通过正则表达式显示谁需要使用依赖,use[{写该文件所用的依赖}],如果只有一个依赖,就可以通过语法糖的形式直接写;
webpack并不需要使用文件引入的依赖,如果使用了,引入的内容(图片,视频之类)不能正常显示;
通过模块方式获取图片的时候,需要安装相应的loader;
在webpack中loader实现不了的,却还想在webpack某个阶段完成的工作,可以通过plugin来实现;
loader用来处理模块化转换的问题,plogin贯穿整个webpack过程;
babel用来实现例如ES6到ES5的转化;
安装babel的预设,从而把常用的插件安装下来,安装babel,需要用到的插件,配置,才能将代码转换成可以部分浏览器可以识别的内容;
通过连接进行引用的vue版本是vue.global.js版本;
如果使用type=“module”版本的话,通过vue.esm-browser.js版本;
运行时+编译器对非.vue文件中的template也能进行解析,仅运行时只能解析.vue文件中template。