菜鸟认识webpack

最新推荐文章于 2024-05-02 23:09:04 发布

最强菜鸟

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量675

点赞数

分类专栏：前端文章标签： vue js webpack javascript

本文链接：https://blog.csdn.net/qq_40298902/article/details/105910405

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

菜鸟认识webpack

说明
一、webpack的安装
二、认识webpack
三、使用webpack打包
四、代码分析
五、错误分析

说明

本文参考了网上部分教程，主要知识来自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才可以。

最强菜鸟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
菜鸟认识webpack

菜鸟认识webpack说明一、webpack的安装二、认识webpack1.概念说明本文参考了网上部分教程，主要知识来自webpack官网，现在将webpack部分知识整理如下注意：本文仅为记录学习轨迹，如有侵权,联系删除一、webpack的安装前提：安装nodejs环境，如果没有可以看本人前面的博客安装命令：（1）npm install -g webpack（2）npm inst...
复制链接

扫一扫