长话短说，正在努力学习的小白一枚，下面是自己对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是没有问题的。
写到这里有点犯困，下个故事再跟大家定义配置文件，脚本执行打包。谢谢大家观看，讲的不好的地方多多见谅。
网友评论