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

 

写在前面

这篇博客也是参照别人的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

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

初始化项目：npm init

作完这个步骤后，在你的项目中会出现这个文件

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

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文件夹中;

 文件夹的结构以下：

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

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

在main.js中写以下语句：

昨晚把下半部分写好了，可是提交的时候一直提示我有敏感文字，我修改以后第二次点击提交没有任何提示，也不知道提交成功没有，可是刷新的话，会从新加载，以前写好的会消失，所以我只有把它存到word里，而后再复制过来，复制过来图片又要从新替换进来。可是我试了不少次以后仍是提示有敏感文字，因而我往复5次以后没有提交成功，我以为这是一个bug，所以我将下半部分提交到了简书上。欢迎你们阅读。

下半部分连接