webpack

2018-03-29  本文已影响15人  徐国军_plus

var path = require('path') // 安装完webpack自带的

--dirname代表webpack.config.js文件当前所在的路径

webpack只支持原生js模块的打包,若是要打包html、css、es6语法写的代码转换为es5,则需要使用loaders

模块文件名a.js:

 function toast(msg,time) {
            this.msg = msg;
            this.dismissTime = time||3000;
            this.createToast();
            this.showToast();
        }
     toast.prototype = {
            createToast: function() {
                var tpl = '<div class="toast">'+this.msg+'</div>';
                this.$toast = $(tpl);
                $('body').append(this.$toast);
            },
            showToast: function() {
                var self = this;
                this.$toast.fadeIn(3000,function() {
                    setTimeout(function() {
                        self.$toast.fadeOut(3000,function() {
                            self.$toast.remove();
                        });
                    },self.dismissTime);
                });
            }
        };

        function Toast(msg,time) {
            return new toast(msg,time);
        }
// 因为module.exports等于一个对象,而现在返回的是一个函数,所以要写成如下形式
module.exports.Toast = Toast 

模块文件名b.js

// 加载a.js模块

var Toast = require('a.js').Toast; // 这么写 ,require('a.js')是对象,加载它的Toast方法


webpack -w // 观察模式,对js代码改动会自动重新打包

webpack -p // 压缩打包js代码

上一篇下一篇

猜你喜欢

热点阅读