webpack 学习笔记(一)

学习一下webpack的基本操作,记笔记,若有什么错误还望纠正

什么是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)

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据