Vue笔记:webpack模块化

模块化

常见的模块化规范:commonJS,AMD,CMD,ES6的Modules

CommonJS模块化了解

核心是导入、导出

导出:

module.exports={
	flag:true,
	test(a,b){
		return a+b
	},
	demo(a,b){
		return a*b
	}
}

导入:

let{test,demo,flsg}=require('moduleA');

一、Es6中的模块化

在model.js文件中:

var name="乔木"
var age=18
var flag=true
function sum(num1,num2){
	return num1+num2
}
if(flag){
	console.log(sum(20,30))
}
//导出两个变量
export {
	flag,sum
}

在test.js文件中

//导入model.js文件中的两个数据(这两个数据要是在model.js中导出的才行)
import {flag,sum} from "./model.js"
if(flag){
	console.log("木木是天才")
}

在html文件中引入这两个js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!--引入两个js文件-->
		<script src="model.js" type="module"></script>
		<script src="test.js" type="module"></script>
	</body>
	
</html>

也可以在定义变量的时候直接导出:

export let a=100;

不仅可以导出变量,还可以导出函数和类

export default a可以让导入的人自己定义a的名字,但是默认的只能有一个

全部导入的简写方法:

 import * as a form 'aaa.js'

使用时:a.flag来使用变量flag

二、webPack

2.1什么是webPack

javaScript应用的静态模块打包工具

webPack会帮助处理模块间的依赖关系,而写CSS,图片,json等文件都可以被当做模块来使用

2.2WebPack安装

webPack依赖node,npm工具是为了管理各种依赖包

npm install webpack@3.6.0 -g

使用;

1、文件目录结构:dist(distribution)文件夹是发布文件夹,打包都打包到这个文件夹,发布时把这个文件夹放到服务器,src是源码文件夹

在这里插入图片描述

2、在src中使用模块化的思想写js文件(比如:我使用commonj)

在MathUtils.js中:

function add(num1,num2){
	return num1+num2
}
function mul(num1,num2){
	return num1*num2
}
module.exports={
	add,
	mul
}

在main.js中:

const {add,mul}=require('./MathUtils.js')

console.log(add(10,20));
console.log(mul(10,20));

但是这个时候html中用普通的引入方法是没用的,因为浏览器不认识这个commonjs的代码,要先用webpack打包成浏览器认识的文件,再引入到html中

打包的命令:

在ide的控制台命令框中先进入到项目目录,然后输入

webpack ./src/main.js ./dist/bundle.js

在这里插入图片描述

在html中链接bundle.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="dist/bundle.js"></script>
	</body>
</html>

在打包时遇到的问题:

在这里插入图片描述
解决:

1、以管理员方式重新打开ide,在控制台输入:

get-ExecutionPolicy

显示Restriced表示“状态是禁止的”

在这里插入图片描述

2、输入set-ExecutionPolicy RemoteSigned,然后在输入get-ExecutionPolicy可以发现更改了状态
在这里插入图片描述

3、最后,重新用webpack打包就好了

2.3 webpack.config.js配置和package.json配置

之前在命令告诉webpack打包什么文件,打包到哪里,现在用配置文件来规定这件事,这样更加方便

在配置webpack.config.js文件之前,要先初始化一些东西,使我们可以动态获取文件路径

在命令框输入npm init,中间会需要设置一个包的名字,其他一路回车,执行完后在文件夹中会出现webpack.json文件,如果以后项目中有一些依赖,执行完这个命令可以再执行npm install这样可以安装依赖

在webpack.config.js中:

(复制使用时把注释去掉,不然可能报错)

const path=require('path')//这是在初始化时会创建的一个包,引入可以使用path中的函数
module.exports={
	entry:'./src/main.js',//定义入口
	output:{//定义出口
		path:path.resolve(__dirname,'dist'),//path.resolve函数是一个路径拼接函数,__dirname是当前目录的路径,这句话的意思是在当前路径后拼接一个dist,这样可以做到不同的地方都能用这个配置文件
		filename:'bundle.js'//定义输出文件
	},
}

为了以后方便使用,可以在package.jsonscript属性中在这里插入图片描述添加一个属性"build":"webpack"这样在控制台直接执行npm run build就可以执行webpack这个命令了。

这里的原因是因为,这里定义的脚本中定义了一些长的命令,然后给他们一个变量名用npm run加上变量名,就可以运行引号中的长命令了。
在这里插入图片描述
这样定义的命令和自己打在控制台的命令的区别是,定义在这里的命令会优先调用本地(这个项目内的)webpack,因为不同项目有可能用不同版本的webpack,用全局的webpack可能会出错,所以最好安装本地的webpack

局部安装的命令:

npm install webpack@3.6.0 --save-dev

在packsge.json 中会多出来一个"devDependencies": { "webpack": "^3.6.0"}属性,这个表示开发时的依赖,在真正部署时这个里面的依赖是不会部署进去的

2.4 webpack中使用CSS文件的配置

什么是loader

开发中,不仅仅用到js,又是也会加载css,图片,一些高级的ES6,TypeScript等,对于webpack本身的能力来说,这些是不支持的,所以需要loader

大部分loader在webpack官网中可以找到,并学习对应的用法

loader使用过程:

step1:通过npm安装要使用的loader

npm install --save-dev css-loader

step2:在webpack.config.js中的modules关键字下进行配置

在webpack.config.js中添加属性:

module:{
		rules:[
			{
				test:/\.css$/,//正则匹配文件名
				use:['style-loader','css-loader']//使用什么loader
			}
		]
	}

step3:在js文件中引入css文件

require('./css/normal.css')

2.5 其他loader配置方法

各种loader配置(webpack官网):https://www.webpackjs.com/loaders/url-loader/

图片:

安装url-loader

webpack.config.js:

module:{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							//当图片大小小于limit是,将把图片编译成base64的字符串形式,当大于limit时会用到file-loader
							limit: 8192
						}
					}
				]
			}

但是只有在图片大小小于limit时,可以用这个loader,如果大于limit要用到file-loader加载,所以要在安装一个file-loader

这是还是发生一个问题,在webpack进行打包以后会把图片重新命名,然后放在dist目录中,导致了url的改变,浏览器找不到图片路径,所以要在webpack.config.js中的output属性中加一个publicPath属性:

output:{
		publicPath:'dist/'
	}

每次在运行url-loader时会在url前面加一个这个路径,拼接成正确的路径

Es6转Es5:babel-loader

安装:

npm install --save-dev babel-loader@7 babel-core babe
l-preset-es2015

webpack.config.js配置:

{
				test: /\.js$/,
				//排除:不用转化node_modules文件的东西
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			}

安装:

npm install --save-dev babel-loader@7 babel-core babe
l-preset-es2015

webpack.config.js配置:

{
				test: /\.js$/,
				//排除:不用转化node_modules文件的东西
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值