前端模塊化實踐----使用webpack打包js代碼

最近在寫一個后台管理頁面，前端純html來寫，后台只負責提供接口。

初期的計划是用angular來寫，但后來需求要兼容IE6，加之時間有限，所以放棄了框架的使用。

webpack只是commonjs和amd，還有ES6

我就只用了commonJS來打包js模塊，其他功能並沒有使用

第一步，安裝webpack

npm install webpack -g

npm install webpack --save-dev

 

第二步，修改webpack.config.js

這是我現在項目里用的config.js

var webpack = require("webpack");
var path = require("path");

module.exports = {
        plugins: [
            new webpack.ProvidePlugin({ //這是把jquery掛到全局上，不用每個模塊都去require
                "$": 'jquery',
                "jQuery": 'jquery'
            }),
            new webpack.optimize.CommonsChunkPlugin('common.js') //有多個入口文件的話提取公共部分，利用瀏覽器緩存
        ],
        entry: {
            "price/roomEntry": "./static/js/app/src/price/roomEntry.js", //入口文件的作用是進行頁面的初始化，比如一些事件綁定，初始數據加載都是放在這里的。每個頁面都可以有一個入口文件
            "inventory/room": "./static/js/app/src/inventory/room.js"
        },
        output: {
            path: path.join(__dirname, 'static/js/app/dist'),  //設置打包后的js的輸出位置
            filename: "[name].js",  //和入口文件的名字相同
            publicPath: "./dist/"  //瀏覽器會從這個目錄開始查找模塊
        },
        resolve: {
            extensions: ['.js', ""],
            alias: {  //注冊模塊，以后用的時候可以直接requier("模塊名")
                cookie: path.join(__dirname,"./static/js/jquery.cookie.js"),  
                jquery: path.join(__dirname,"./static/js/jquery.min.js"),
                header: path.join(__dirname,"./static/js/app/src/common/header.js"),
                leftMenu: path.join(__dirname,"./static/js/app/src/common/leftMenu.js"),
                util: path.join(__dirname,"./static/js/app/src/common/util.js"),
                logout: path.join(__dirname,"./static/js/app/src/common/logout.js"),
                AJAXService: path.join(__dirname,"./static/js/app/src/common/AJAXService.js"),
                laydate: path.join(__dirname,"./static/js/lib/laydate/laydate.js"),
                accommodationPriceList: path.join(__dirname,"./static/js/app/src/price/accommodationPriceList.js"),
                virtualDOM: path.join(__dirname,"./static/js/app/src/common/virtualDOM.js"),
                trToggle: path.join(__dirname,"./static/js/app/src/common/trToggle.js")
            }
        },
        devtool: "sourcemap"  //生成用來調試的map
        }

 

模塊文件的寫法，我用的commonJS

先寫一個對象

//module1.js

var object = {

    foo: function(){

       ...

      }

}

module.exports = object;

然后別的模塊想用里面的方法就可以

var object = require("module1");

object.foo;

大概的用法就是這樣了，還有些功能可以去官網查查。