webpack快速学习1

什么是webpack
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
webpack的特点
丰富的插件，方便进行开发工作
大量的加载器，包括加载各种静态资源
代码分割，提供按需加载的能力
发布工具
webpack的优势
webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
能被模块化的不仅仅是 JS 了。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
下面开始学习：
1.全局安装：
npm install webpack –g
安装完成之后输入 webpack –help 通过查看提示信息来检验是否安装完成。
2.在目标标目录下输入 npm init 进行一个npm的初始化。然后一路回车，然后再进行一个本地安装npm install webpack –-save-dev
打包

1.在根目录下创建一个entry.js文件里面简单的写点东西

document.getElementById('app').textContent = 'hello'

再在根目录下创建一个index页面，并简单的写点东西，并在index里面链入一个js文件，如：bundle.js，这个js文件会通过webpack生成，这是我们的输出文件。同时index里面的id要和entry.js里的id一致

2.输入webpack entry.js bundle.js会 在根目录下生成一个bundle.js的文件,此时在entry.js中你自己写入的业务代码已经打包进了bundle.js中。你可以打开bundle.js文件去查看里面的代码，可以看到你在entry.js中写入的业务代码，在最下面。


此时你打开浏览器看看index，看到个hello就对了
3.在根目录下创建一个name.js文件 在里面定义一个module并暴露，再简写点东西比如：

4.在入口文件entry.js中引入name.js所暴露的借口

5.然后输入webpack entry.js bundle.js将入口文件的内容打包进bundle.js，然后在浏览器中打开页面看效果，会看到页面中会生成hellocourse webpack；
CSS文件的引入
1.这个功能是靠webpack的loader功能实现的。所以我们需要输入：npm install css-loader style-loader –save-dev 来安装这两个loader

2.在根目录下创建一个css文件，并写入一些简单的样式 如：body{background：red}

3在入口文件中写入引用css的代码

此处的style！和css！是指加载的我们刚才安装的loader
4.输入webpack entry.js bundle.js命令，打包到bundle.js，然后查看index网页

说明我们的css已经已经成功的引入，也可以通过查看bundle.js中的代码，可以看到引进了许多模块。
webpack的配置文件
1.在根目录下创建一个webpack.config.js文件，然后再里面写入webpack的配置，并暴露出去。

这其中由于已经配置好了loader，所以在入口文件entry.js中的引入的两个css和style的loader就可略掉了省略


同时，在命令行中也不用专门写webpack entry.js bundle.js这样的命了，直接输入webpack命令即可，他会根据我们的配置自动去打包到bundle.js中。
2.输入webpack命令，然后查看index页面

引入成功
通过source-map来调试代码
在webpack中必须使用source-map才能够生成这些模块的源文件，才能在浏览中查看源码并进行调试。

浏览器的Sources中我们只能看index.html和bundle.js两个源文件，我们创建的entry.js和name.js是看不到的
1.输入webpack –devtool source-map

这样就会生成一个source-map

2.回到浏览器查看Sources，会多出一个webpack文件夹，里面就有我们之前创建的文件了并且也是能看到源码的

可以在name中加入一个debugger来看一下变化
3.同理，我们也可以在config文件中设置devtool来让我们像刚才一样，只需要输入一个webpack命令就能执行source-map的功能