webpack 项目实践

dongfangho

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, 实际工作中遇到的问题

• 　　如何下手写？
  　　我是直接在 html 中引用通过webpack 编译好的 js 文件，因为我知道webpack 会把在这个页面或则项目中用到的js都打包到此文件中。
  　　
  
  <script src=&quot;../../buit/bindPhone.bundle.js&quot;></script>
  
• 　　如何编写自己的业务模块代码？
  　　因为 webpack 是兼容 AMD 规范和 commonjs 的，所以，我们可以利用 require()来加载依赖包，也可以用 define() 来定义我们的模块。当然，更好的是直接抒写：
  　　
  
  var $ = require('jquery');　　
  
  　　
  require('./lib/jquery.mockjax.min.js');
  　　
  
  　　
  var Mock = (function(){
  　　...
  　　
  })()
  　　
  
  　　
  module.exports = Mock;
  
  
• 　　如何处理基于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
  
  
• 　　在开发中，我们经常修修改改，难道每次都要 webpack 一下（编译）？
  　　可以使用 --watch 来监听文件变化，并执行编译。
  　　
  
  webpack --watch　　
  
  　　
  但是，我发现运行并不好事，所有我就用gulp来监听js文件变动，然后执行 webpack