webpack打包backbone

通过webpack模块化拆分backbone项目。思路是把Backbone,underscore和jQuery引入后作为window全局变量进行注册。然后剩下的事情就简单了,简单粗暴的办法解决问题。

首先是webpack的配置文件

var webpack = require('webpack')
var path = require('path')
module.exports = {
    entry:[
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        './src/app.js'
    ],
    resolve: {
        extensions: ['', '.js','.html']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename:'dist.js',
        publicPath:''
    },
    module:{
        loaders:[
            {
                test:/\.html$/,
                exclude:/node_modules/,
                loader:'html-loader'
            }
        ]
    }
}

在app.js文件中引入相关模块,把相关模块全部注册在window对象上面

window.$ = require('jquery')
window.Backbone = require('backbone')
window._ = require('underscore')

其余代码的写法就和一般的代码写法一样了,在js文件中记得模块导出即可。
github地址:https://github.com/btc022003/webpack-backbone/

你可能感兴趣的:(webpack打包backbone)