webpack-note
Opened this issue · 1 comments
这几天一直都没闲下来写博客，最近在研究vue2.0系列，准备自己做一个vue小项目，下面先介绍一下webpack的使用...废话少说。
第一部分 webpack 介绍：
／／／
1、为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器
...
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
2、什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
3、WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Grunt和Gulp的工作流程
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
第二部分 webpack 使用+环境搭建：
／／／
1、安装 Webpack
在安装 Webpack 前，你本地环境需要支持 node.js。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
使用 cnpm 安装 webpack：
cnpm install webpack -g
2、接下来我们使用 webpack 命令来打包：
webpack main.js bundle.js
3、使用配置文件方式进行webpack打包
我们可以将一些编译选项放在配置文件中，以便于统一管理：
创建 webpack.config.js 文件，代码如下所示：
app/webpack.config.js 文件
> module.exports = {
> entry: "./runoob1.js",
> output: {
> path: __dirname,
> filename: "bundle.js"
> },
> module: {
> loaders: [
> { test: /\.css$/, loader: "style-loader!css-loader" }
> ]
> }
> };
接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件：
> webpack
>
> Hash: 4fdefac099a5f36ff74b
> Version: webpack 1.12.13
> Time: 576ms
> Asset Size Chunks Chunk Names
> bundle.js 11.8 kB 0 [emitted] main
> [0] ./runoob1.js 65 bytes {0} [built]
> [5] ./runoob2.js 46 bytes {0} [built]
> + 4 hidden modules
webpack 命令执行后，会默认载入当前目录的 webpack.config.js 文件。