webpack 项目实践

1，必要的环境

• node 环境 下载地址（http://nodejs.cn/）
• npm 貌似 下载地址（https://www.npmjs.com/）不过，貌似 Node 安装可自带 npm。

2, 创建项目工程

利用npm来初始化一个项目的工程文件，在命令窗口中找到项目文件

npm init

执行以上代码后，会在项目文件根目录生成一个 package.josn 文件（配置文件）

之后，安装的包的时候，使用 npm install ‘包名’ --save-dev 均可以把安装的包记录到 配置文件中，这样作的目的是，当你迁移项目的时候，只须要把你本身的代码打包走，而后带着 package.json 就能够直接迁移依赖包了。

3，创建 webpack 配置文件

这个须要咱们手工创建，通常的配置文件名称默认写：webpack.config.js,

在此以前，须要咱们利用 npm 来安装 webpack，通常咱们安装到全局：

npm install webpack -g

而后，根据咱们的实际状况来抒写咱们的配置：

module.exports = {

    // 基础路径
    context : __dirname + '/src/script',

    // 入口点，
    entry : {
        bindPhone : './bindPhone'
    },

    // 出口点
    output : {
        filename : '[name].bundle.js',
        path : __dirname + '/built'
    },

    // 模块加载器，可解决不兼容 commonjs 的插件
    module : {
        loaders : [
            { test : require.resolve('jquery'), loader : 'expose?$!expose?jQuery'},
            { test : require.resolve('./src/script/lib/jquery.mockjax.min.js'), loader : 'exports?window.mockajax'}
            
            
        ]
    }
}

具体每一个配置项有什么用，可参看 API(http://webpack.github.io/docs/configuration.html)

4, 实际工做中遇到的问题

1. 如何下手写？

   我是直接在 html 中引用经过webpack 编译好的 js 文件，由于我知道webpack 会把在这个页面或则项目中用到的js都打包到此文件中。

   <script src="../../buit/bindPhone.bundle.js"></script>

2. 如何编写本身的业务模块代码？

   由于 webpack 是兼容 AMD 规范和 commonjs 的，因此，咱们能够利用 require()来加载依赖包，也能够用 define() 来定义咱们的模块。固然，更好的是直接抒写：

   var $ = require('jquery');
   
    require('./lib/jquery.mockjax.min.js');
   
    var Mock = (function(){
        ...
    })()
   
    module.exports = Mock;

3. 如何处理基于jquery的第三方插件？

   实际工做中，由于暂时没有后台提供接口，所以，我就利用 mockjax 来模拟后台响应，这个插件依赖于 jquery 而且其自己不是AMD规范或则commonjs，因此遇到不少问题：

   第一个问题 ： jquery 未定义？
   由于他依赖于jquery，可是咱们并未在全局设定 jquery 对象，所以会报错，即便在 js 文件中 require('jquery') 也不行

   var $ = require('jquery');
   require('./lib/jquery.mockjax.min.js');

   想这种相似的处理第三方的，咱们通常解决办法是使用 shimming，要在 webpack 配置文件中把 jquery 变成全局变量

   // 模块加载器，可解决不兼容 commonjs 的插件
       module : {
           loaders : [
               { test : require.resolve('jquery'), loader : 'expose?$!expose?jQuery'}
           ]
       }

   处理此方法咱们依赖于 expose-loader，因此，咱们要安装包 npm install expose-loader --save-dev

4. 在开发中，咱们常常修修改改，难道每次都要 webpack 一下（编译）？

   可使用 --watch 来监听文件变化，并执行编译。

   webpack --watch
   
   可是，我发现运行并很差事，全部我就用gulp来监听js文件变更，而后执行 webpack