webpack

作者: 徐国军_plus | 来源:发表于2018-03-29 22:37 被阅读15次

    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代码

    相关文章

      网友评论

          本文标题:webpack

          本文链接:https://www.haomeiwen.com/subject/uidkgxtx.html