前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布

webpack

作者头像
小胖
发布2018-06-28 12:26:44
5750
发布2018-06-28 12:26:44
举报
文章被收录于专栏:进击的君君的前端之路

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

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

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

模块文件名a.js:

代码语言:javascript
复制
 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

代码语言:javascript
复制
// 加载a.js模块

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.03.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档