Vue笔记：webpack模块化

最新推荐文章于 2023-02-21 16:25:12 发布

乔木木木木

最新推荐文章于 2023-02-21 16:25:12 发布

阅读量193

点赞数

分类专栏： # vue 文章标签： javascript webpack npm

本文链接：https://blog.csdn.net/qq_43005779/article/details/106803527

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

模块化

常见的模块化规范：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.json中script属性中在这里插入图片描述添加一个属性"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']
					}
				}
			}