webpack打包单页面如何引用的js


Posted in Javascript onJune 07, 2017

目录结构如下图所示:

webpack打包单页面如何引用的js

webpack打包代码如下:

var webpack = require('webpack');
var fs = require('fs');
var path = require('path');
var fse = require('fs-extra');

const debug = process.env.NODE_ENV !== 'production';

function entries(jsPath) {
  var dirnames = fs.readdirSync(jsPath);

  var entries = {}, entry;

  for (var i = 0; i < dirnames.length; i++) {
    var dirname, basename;
    var jsList = [];
    dirname = dirnames[i];
    var files = fs.readdirSync(jsPath + '/' + dirname);
    for (var j = 0; j < files.length; j++) {
      entry = files[j];

      basename = path.basename(entry, '.js');
      jsList.push(path.join(jsPath, dirname, entry));
    }
    entries[path.join(dirname, 'app')] = jsList;
  }


  return entries;
}

var option = {
  entry: entries(__dirname + '/js/src'),
  output: {
    path: __dirname + '/dist/',
    filename: '[name].js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}
var compiler = webpack(option);
compiler.run(function() {
  fse.copy( __dirname + '/page/', __dirname + '/dist/');
  console.log('success');
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
vue使用Axios做ajax请求详解
Jun 07 #Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 #Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 #Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 #Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 #Javascript
详解Vue 开发模式下跨域问题
Jun 06 #Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
yii分页组件用法实例分析
2015/12/28 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Django中create和save方法的不同
2019/08/13 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
Shell编程面试题
2012/05/30 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
初中生自我评价
2014/02/01 职场文书
专题组织生活会方案
2014/06/15 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年预算员工作总结
2015/05/14 职场文书
党员转正申请报告
2015/05/15 职场文书
高三数学教学反思
2016/02/18 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js