前端开发工具--webpack的使用

刚学习了一下webpack,想对webpack的使用过程中的一些踩过的一些坑做一些说明，希望能够避免后面学习的同学继续踩。

本人文采不是很好，能用代码说明问题的，尽量不用语言说明。

一、webpack使用前准备

1、webpack是什么

     官方定义：webpack is a module bundler. 

                 webpack takes modules with dependencies and generates static assets representing those modules.

    即：webpack是一个模块打包工具，webpack将模块之间的相互依赖打包成静态的资源。意思就是，webpack可以帮助你处理模块之间的依赖。

2、webpack使用依赖环境

      webpack是一个丰富的插件系统，插件机制是webpack的核心。所以我们需要安装nodejs，用来下载需要的插件。

二、开发环境搭建

  1、nodejs 环境搭建

     进入到nodejs 官方网站：https://nodejs.org/en/，进入download模块，下底部找到 Previous Releases

进入后，可以看到nodejs的所有版本，个人推荐：4.4.7版本，点击download进入下载页面

我的本机环境是，win8,64位，所以下载node-v4.4.7-x64.msi，可以按照自己的环境，下载对应的版本。

下一步，安装完成。

     安装完成后，配置环境变量。我的安装目录为：D:\development_env\nodejs\node-4.4.7

     配置环境变量如下：在path变量后加上:   ;D:\development_env\nodejs\node-4.4.7;D:\development_env\nodejs\node-4.4.7\node_global

    一定要指定这两个目录，一个是为了使用Node命令，另外一个是为了使用安装的其他插件命令，如webpack命令。

   配置完成后，在cmd中输入，node -v 如果显示如下说明安装成功。

   配置nodejs自定义配置,设置prefix,cache路径：

需要设置：cache,prefix这两个配置，可以按照上面的命令设置自己的。

   ps:如果网络不好的的话可以将npm资源地址映射为  国内淘宝镜像。

方法

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、webpack 安装

安装完nodejs后，可以利用nodejs提供的插件库，来安装我们需要的插件。

webpack安装，建议全局安装一个，本地项目安装一个。

     全局安装webpack命令：npm install webpack@version  -g     @version可以指定版本。我全局安装的为：2.6.1默认最新版本。

    项目中安装的版本为：1.15.0(个人推荐)；稍后再说这个如何安装。

    安装完webpack ，在cmd 中输入webpack -v 

说明webpack全局安装完成。

三、项目初始化

      1、package.json

       新建项目目录，如web,在cmd中进入到该目录下，执行npm init 之后就会在目录下生成package.json文件。

待续。。。。