vue cli原理

amd异步加载模块化方式-amd基本APIrequire会定义三个变量: define,require,requirejs，其中require === requirejs，一般使用require更简短define从名字就可以看出这个api是用来定义—个模块require 加载依赖模块，并执行加载完后的回调函数define( function(){function fun1(){alert("it

是千千千熠啊

321人浏览 · 2020-11-09 11:38:35

是千千千熠啊 · 2020-11-09 11:38:35 发布

vue li原理

amd
异步加载模块化方式-amd

基本API

require会定义三个变量: define,require,requirejs，其中require === requirejs，一般使用require更简短

define从名字就可以看出这个api是用来定义—个模块
require 加载依赖模块，并执行加载完后的回调函数

define( function(){
	function fun1(){
		alert("it works");
	}
	fun1();
})

加载文件

之前的例子中加载模块都是本地js，但是大部分情况下网页需要加载的IS可能来自本地服务器、其他网站或CDN，这样就不能通过这种方式来加载了，我们加载一个jque库为例:
之前的例子中加载模块都是本地js，但是大部分情况下网页需要加载的是可能来自本地服务器、其他网站或cdn，这样就不能通过这种方式来加载了，我们加载一个jquery库为例：

require.config({
	paths:{
		"jquery" : [ "https://cdn.bootcss.com/jquery/1.10.2/jquery.js"]
		/* 使用远程jquery文件 */
		
	}
})
require(["jquery,"js/a" ],function($){
	$(function(){
		alert(""load finished" );
	})
})

webpack

构建自动化框架
在这里插入图片描述

通过webpack进行编译执行成浏览器可以识别的js.css.jpg.png.html文件等

安装webpack

使用cnpm安装全局webpack

cnpm install webpack -g

查看webpack版本

webpack -v

在这里插入图片描述

-d
-t 开发者工具

打包webpack文件

webpack ./index.js -o ./dist
//将index.js文件打包到output.js文件

打包成功
在这里插入图片描述

dist就是打包好的文件
在这里插入图片描述

就可以直接链接到main.js文件里

<head>
		<meta charset="utf-8">
		<title></title>
		<script src="main.js" type="text/javascript"></script>
	</head>

webpack配置webpack.config.js

webpack.config.js配置文件

const path = require('path');

//导出一个文件
module.exports={
    //entry入口，ouput 出口
    entry:"./hello.js",
    output:{
        path:path.resolve(__dirname,'dist'),//路径模块
        filename:"my-first-webpack.bundle.js"//创建名为my-first-webpack.bundle的js文件
    }
};

loader

loader让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript) , loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。
本质上,webpack loader将所有类型的文件，转换为应用程序的依赖图（和最终的bundle)可以直接引用的模块。

例，你可以使用loader告诉webpack加载CSS文件，或者将TypeScript转为JavaScript。为此，首先安装相对应的loader:

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示webpack对每个.css 使用css-loader，以及对所有 .ts文件使用ts-loader :
webpack.config.js

module.exports = {
	module: {
		rules:[
			{ test:/\css$/ , use: 'css-loader'},
			{ test:/\.ts$/ , use: 'ts-loader'}
		]
	}
};

进行编译前对loader进行安装

cnpm install style-loader

在这里插入图片描述

cnpm install css-loader

在这里插入图片描述

module: {
		rules:[//编译规则
            {
                test: /\.css$/,
                use:[
                    {loader:'style-loader'},
                    {loader:'css-loader' },//用css-lodar编译模块    
                ]
            }
           // { test:/\.css$/ , use: 'style-loader'},
            //{ test:/\.css$/ , use: 'css-loader'},
			
		]
	}