前端自动化构建工具之webpack入门——简单入门

分手后的思念是犯贱 2022-01-13 13:49 281阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

###  ###

### 写在前面 ###

这篇博客也是参照别人的webpack入门，加上自己的一些操作，还有我在此过程中遇到的困难。如果是已经入门的或者这方面的高手，请绕行，也请勿吐槽。

### 正文开始 ###

#### 我们为什么要学习webpack ####

首先，我们为什么要学习前端自动化构建工具，我开始了解自动化构建工具的时候觉得很麻烦，要配环境，还要敲命令，就为了把那些文件都打包在一个叫bundle.js的文件里？那有什么意义？

看了半天文档，也没明白到底有啥好处。于是去参照了前辈的博客。

*  **模块化**，让我们可以把复杂的程序细化为小的文件;
 *  类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
 *  Scss，less等CSS预处理器等等。

好了，现在我们明白，为什么要使用他了。

#### webpack工作方式 ####

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

#### 正式开始 ####

在此之前需要安装node的环境，具体方法请百度。

第一步，新建 一个文件夹，这里我叫webpackstudy，然后使用命令行进入。

第二步，安装，如果你想其他的文件也可以使用，推荐安装全局的，否则的话就安装一个局部的。

全局安装：npm install -g webpack

安装到项目目录：npm install --save-dev webpack

![145737\_uXsT\_3802541.png][145737_uXsT_3802541.png]

这样一串黄色的显示完，就安装好了。

初始化项目：npm init

做完这个步骤后，在你的项目中会出现这个文件![145905\_1XYd\_3802541.png][145905_1XYd_3802541.png]

输入这个命令，命令行会提示你输入一系列的信息，如果不准备发布的话，回车就行了。

package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包

// 安装Webpack
    npm install --save-dev webpack

回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个`index.html`文件）。接下来我们再创建三个文件:

*  `index.html` \--放在public文件夹中;
 *  `Greeter.js`\-- 放在app文件夹中;
 *  `main.js`\-- 放在app文件夹中;

文件夹的结构如下：

![150631\_rr3R\_3802541.png][150631_rr3R_3802541.png]

![150648\_cYAY\_3802541.png][150648_cYAY_3802541.png]![150716\_58GQ\_3802541.png][150716_58GQ_3802541.png]

我们在index.html中写如下代码，他的目的是为了引入打包后的js文件bundle.js

![150921\_Fx64\_3802541.png][150921_Fx64_3802541.png]

在Greeter.js中写如下代码，这个文件的作用是，为了给index页面创建结点并插入语句

![151428\_6a7H\_3802541.png][151428_6a7H_3802541.png]

在main.js中写如下语句：

![151747\_RhyA\_3802541.png][151747_RhyA_3802541.png]

昨晚把下半部分写好了，但是提交的时候一直提示我有敏感文字，我修改之后第二次点击提交没有任何提示，也不知道提交成功没有，但是刷新的话，会重新加载，之前写好的会消失，因此我只有把它存到word里，然后再复制过来，复制过来图片又要重新替换进来。但是我试了很多次之后还是提示有敏感文字，于是我往复5次之后没有提交成功，我觉得这是一个bug，因此我将下半部分提交到了简书上。欢迎大家阅读。

[下半部分链接][Link 1]

转载于:https://my.oschina.net/u/3802541/blog/1647214

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/9ed84a36063b4cd4b1d790ceeedbcbc7.png
[145737_uXsT_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/145737_uXsT_3802541.png
[145905_1XYd_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/145905_1XYd_3802541.png
[150631_rr3R_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/150631_rr3R_3802541.png
[150648_cYAY_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/150648_cYAY_3802541.png
[150716_58GQ_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/150716_58GQ_3802541.png
[150921_Fx64_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/150921_Fx64_3802541.png
[151428_6a7H_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/151428_6a7H_3802541.png
[151747_RhyA_3802541.png]: https://static.oschina.net/uploads/space/2018/0319/151747_RhyA_3802541.png
[Link 1]: https://www.jianshu.com/p/19629ca6deca