说明
本文参考了网上部分教程,主要知识来自webpack官网,现在将webpack部分知识整理如下
注意:本文仅为记录学习轨迹,如有侵权,联系删除
一、webpack的安装
前提:安装nodejs环境,如果没有可以看本人前面的博客
安装命令:
(1)npm install -g webpack
(2)npm install -g webpack-cli
查看安装是否成功
二、认识webpack
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
简单来讲就是一个打包工具,具体可以打包什么资源,可以参考下面的一张图
在开始之前有必要了解 下面4个核心概念,具体的概念及使用可以自行查看webpack官网
- 入口(entry):入口文件,指定WebPack将哪一个文件作为项目的入口
- 输出(output):将打包完的文件放置到指定的路径
- loader :让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。
- 插件(plugins):loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。
三、使用webpack打包
创建一个空项目,目录结构如下:
helloworld.js代码如下:
//暴露方法,将方法写好放在这里,注意关键字:exports
exports.helloWorld1 = function () {
alert("hello world");
document.write("<h1>hello world1</h1>")
};
exports.helloWorld2 = function () {
alert("hello world");
document.write("<h1>hello world2</h1>")
};
exports.helloWorld3 = function () {
alert("hello world3");
document.write("<h1>hello world3</h1>")
};
index.js代码如下
var hello = require("./helloworld")//导入helloworld.js文件,并赋值给变量hello
hello.helloWorld1();//通过变量hello调用方法,跟后端java的方法调用类似
hello.helloWorld2();
hello.helloWorld3();
webpack.config.js代码如下
module.exports = {
entry: './src/index.js',//入口,要使用webpack打包那个文件。
output: {
filename: './dist/main.js'//指定到那个目录中去\输出文件的名称
}
};
准备好之后直接开始打包,在idea的Terminal里面输入打包指令:webpack
打包成功之后会生成dist文件夹,里面有一个main.js,可能到现在还不知道打包是什么意思,有什么用,这就需要自己把玩一下自己打包的代码自然就懂了,在src/html里面创建index.html,并将打包的文件引入后,打开浏览器访问index.html
<!--index.html代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="../../dist/main.js"></script>
</body>
</html>
访问结果:
四、代码分析
- 我们将代码用后端写方法的方式,将一个一个的方法写在helloworld.js里面,上面的代码写了三个方法:helloworld1,helloworld2,helloworld3,每个方法用alert弹出信息,并在页面输出相应的helloworld
- 通过index,.js,将helloworld.js引入index.js,并且赋值给一个变量hello,通过变量hello调用上面的三个方法
- 打包的时候,通过webpack.config.js将index.js打包,生成dist/main.js,再将打包好的main.js引入index.html使用。
五、错误分析
经过本人多次踩坑,建议文件的命名按照上面的命名,打包的时候就不会出错,估计出错跟版本有关。
错误1
webpack4.x是以项目根目录下的’./src’作为入口,创建src文件夹,而且webpack4.x以’./src/index.js’作为入口,所以必须按照上面的格式来创建文件,将要打包的js放到src文件夹,并且入口函数必须是index.js才可以。