学习一下webpack的基本操作,记笔记,若有什么错误还望纠正
什么是webpack?
按照我的理解就是一种模块打包的工具,吧各个模块打包进一个文件中
例如vue里面包含很多功能组件什么的吧,然后给我们使用的时候我们只需要引入vue.js
但是这些模块,组件什么的有那么多,开发者全在这么一个文件里面编写不是非常的麻烦?所以就有了webpack这类型的工具,按照目录(文件)将各个模块分开,一个文件写一个功能,最后打包成vue.js一个文件
当然webpack的功能不仅只有打包这一个种功能
开始使用
安装
国内npm可能较慢,可以去下载淘宝的镜像
//初始化package.json文件,一路回车就行
cnpm init
//全局安装webpack
cnpm install -g webpack
//安装到你的项目目录
cnpm install --save-dev webpack
开发
创建一个src目录,意思为源码,创建module目录,各种模块存放
src目录下创建一个home.js,module目录创建两个js文件,insert.js和delete.js
目录结构
|-webpack
|-build
|-src
|-module
|-insert.js
|-delete.js
|-home.js
|-demo
|-package.js
|-webpack.config.js
源码
首先在insert.js和delete.js中写,insert创建一个div,delete删除div
//insert.js
/**
* module.exports 用于导出函数
*/
module.exports = function (content) {
var newDiv = document.createElement('div');
//随机生成一个id,emmm
var id = 'id' + Math.random();
newDiv.id = id;
newDiv.innerHTML = content;
document.body.appendChild(newDiv);
return id;
}
//delete.js
module.exports = function (id) {
document.getElementById(id).remove();
}
在home.js中引用他们
//导入插入和删除
const Insert = require('./module/insert.js');
const Delete = require('./module/delete.js');
var i = 0;
var id = new Array();
window.add = function () {
id.push(Insert('增加div' + ++i));
}
window.del = function () {
Delete(id[0]);
id.splice(0,1);
}
完成后利用webpack打包成一个文件,在更目录下建立webpack.config.js文件,这个文件是webpack的配置文件,完成之后,我们将这个项目复制给别人之后,他只需要运行webpack就可以直接得到打包完成之后的文件了
//webpack.config.js
module.exports = {
entry: __dirname + "/src/home.js", //入口文件
output: {
path: __dirname + "/build", //输出目录
filename: "home.js" //输出的文件名
}
}
例子:demo/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../build/home.js"></script>
</head>
<body>
<button onclick="add();">添加</button>
<button onclick="del();">删除</button>
</body>
</html>
demo:mkdown
下载完成后直接输入webpack就可以打包(如果你安装了webpack的话,否则就要先运行npm安装webpack)
文章评论