Webpack基础分享

 三大主流框架都是基于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。