webpack 项目实践

1,必要的环境

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
上一篇:ReflectionHelper


下一篇:并发的HTTP请求,apache是如何响应的,以及如何调用php文件的