初入webpack，手把手记录（一）
原谅转行小白比较笨，看了那么多的文档api仍是没学好webpack，这阵子公司闲决定把webpack学完，现在开始表演，希望获得老师转身！
1、开门见山首先就是安装，先安装node.js，然后打开命令行（cmd）安装webpack，执行命令：npm install webpack -g
ok，检查你是否安装好了 输入 webpack -v 出现版本号就是可以咯。接下来我们开始打包文件吧
2、首先让我们在本地创建一个文件 输入命令 mkdir wpk-test（wpk-test是文件名，爱叫啥叫啥），然后进入这个文件夹
3、然后我们打开编辑器，创建几个文件咯，首先建立一个src文件夹，里面有index,js、str.js。
我们在str.js写下我们要的代码，来个简单的吧，比如
function init(s){
return s;
}
module.exports=init;
你是否会问module.exports=init;这句代码是什么？那么我悄悄告诉你
module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。
懂了么，不懂我也没办法了，我只知道这么多，哈哈。
ok，现在在str.js写下了这个代码，那么现在我们去index.js文件里写下另外一段代码
var fn = (require('./str.js'));
document.write(fn('你好世界，biubiubibiu'));
首先我们先看第一段代码，只是一个简单的函数，就是你穿个参数进去，传什么我就返回什么。然后在index.js里 我们定义一个变量 fn，括号里的require又要一些时间来解释了，这里先不解释，文末在解释。
别发呆了，快上车。代码接下来就是输出函数，传个参数进去。ok，这个时候你会问了，那现在html文件那些在哪？网页怎么显示？别急，马上来
我们建个html文件，然后引入js，引入哪个？str.js还是index.js？都不是，我们引入main.js，main.js从何而来？从来处来，我们重新回来cmd，执行命令
webpack --mode development
或者
webpack --mode production
就已经打包好了，这个时候回到编辑器，是不是多了一个文件夹dist，里面有个js文件叫做main？那么你引入他们就好了
这个时候你打开页面，就可以看到效果了，这就是最简单的单文件打包了。
再来说一下require是什么东西：不想打字，想知道直接去看阮雪峰老师的博文吧http://www.ruanyifeng.com/blog/2015/05/require.html
整理一下刚学踩了几个坑；
刚开始是将文件统一放在一个层级下，那么打包时就出现了下面的情况：
1、当一切准备好了，兴高采烈的输入了 webpack str.js bundle.js，然后收获一串错误
the cli moved into a separate package:webpack-cli. please install 'webpack-cli' in addition to webpack itself to use the cli. ->when using npm: npm install webpack-cli -d ->when using yarn: yarn add webpack-cli -d
为啥？因为是要我们安装webpack-cli，简单啊，那我就在项目本地装一个不就ok了
然后你又兴高采烈的输入了 npm install webpack-cli -d，然后再次执行打包命令，又收获了一串错误，
the cli moved into a separate package:webpack-cli. please install 'webpack-cli' in addition to webpack itself to use the cli. ->when using npm: npm install webpack-cli -d ->when using yarn: yarn add webpack-cli -d
哦豁？原来是要在全局安装，那也还是很简单的嘛，卸载了重装不就好了，然后你又兴高采烈的输入了
npm uninstall webpack-cli
npm install -g webpack-cli
装好以后迫不及待的打包，结果又收获一串错，哈哈哈哈，怀疑人生？头皮发冷吗？
warning in configuration
the 'mode' option has not been set. set 'mode' option to 'development' or 'production' to enable defaults for this enviroment.
error in multi ./hello.js bundle.js
module not found:error:can't resolve 'bundle.js' in 'c:/users/你的用户名/desktop/webpack-test'
@ multi ./hello.js bundle.js
是因为没有配置mode选项，然后我们输入上面所说的两种命令
webpack --mode development 或者 webpack --mode production
结果又报错，对不起，我可能要去世了，不学了，先走一步。
少年，快完了，一步步来嘛，这个时候报错是
error in entry module not found:error:can't resolve './src' in 'c:/admin/pc/desktop/webpack-test'
就是说没有入口文件，那么我们继续创建就好了，将index.js或str.js一起丢进sec文件夹里，再来打包。其实这里还是有一个问题的。
webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，
其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。 因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行，所以打包命令直接输入webpack --mode development或者webpack --mode production就好了
好了，今天先到这，快去写bug吧!