webpack雨后的故事

长话短说，正在努力学习的小白一枚，下面是自己对webpack的一些总结，直接进入主题。

故事一：走入webpack

webpack背后的故事？

觉得在前端这个行业，webpack的流行程度都超越了我们的想象，从1.0一直到3.0，版本一直在不断优化更新，现在让我为你打开着神奇的新世界的大门，嘻嘻。

为啥要学会webpack打包？

现在前端网页都有着各种各样的功能，而且而且啊，JavaScript的复杂程度逐渐增加，还需要一大堆依赖包，还有各种各样的框架，还有其他类似于TypeScript这种在JavaScript基础上拓展的开发语言，也是我们目前Javascript不能直接去使用的，还要去转化成浏览器能够识别的Javascript的文件，还有scss,less这些预处理器......还有一大堆呢，所以呢，现代化的前端就需要WebPack的辅助了。

webpack是个啥东西，似懂非懂？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用，还可以优化你的项目。

有啥优点？

webpack可以帮我们打包，转换，优化。

打包？就是把我们写的多个JavaScript文件打包成一个，减少服务器的压力。

转换？在JavaScript基础上拓展的开发语言转化成浏览器能够识别的普通javascript文件。

优化？使我们的项目得到优化跟性能上的提升。

wepack这玩意要怎么安装啊？

前期准备：确保你电脑上安装了node,看看官方文档就知道怎么装了。

webpack安装是可以使用npm来装的，这里我们新建一个空的练习文件夹（我这里就命名为webpack_demo,这里就看你自己情况来定），

\\全局安装 npm install -g webpack

注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，但是在 webpack不同 版本的项目中使用的话，可能会导致你的项目构建失败。

安装失败原因：
1.可能你的node版本太低，建议到官网下个新的
2.可能网络原因，考虑使用cnpm来安装，使用这条命令npm install -g cnpm --registry=https://registry.npm.taobao.org，安装完，你就直接使用cnpm来安装就可以了，
3.权限问题。

使用webpack前的准备

在上述练习文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用
npm init
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

你也可以使用 npm init -y 这个参数-y就是默认参数，直接给你生成package.json这个文件

//项目目录下安装 npm install --save-dev webpack
这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用...

故事二：上手webpack做个demo

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

项目结构图

index.html内容如下：

index.html内容

index.html里面的main.js文件是不用自己新建的，是由webpack给我们打包的。。

entry.js作为入口文件：

entry.js内容

我们的第一次打包

webpack {entry file} {destination for bundled file}

{entry file}入口文件的路径，本文中就是src/main.js的路径；
{destination for bundled file} 填写打包后存放的路径。

按照上面模板，我这里写个例子：
webpack src/entry.js dist/main.js

可能有些小伙伴上文忽略了没怎么注意，就会出现下图这个

不是内部或者外部命令

因为这里我自己本来全局已经安装了webpack,所以直接使用webpack是没有问题的。

写到这里有点犯困，下个故事再跟大家定义配置文件，脚本执行打包。谢谢大家观看，讲的不好的地方多多见谅。