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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
详解javascript数组去重问题
Nov 06 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
浅谈Vue数据响应思路之数组
Nov 06 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
PHP扩展程序实现守护进程
2015/04/16 PHP
php计算税后工资的方法
2015/07/28 PHP
php简单的上传类分享
2016/05/15 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JSON格式化输出
2014/11/10 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
Python笔记之facade模式
2019/11/20 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
CSS3制作日历实现代码
2012/01/21 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
甜品店创业计划书
2014/08/14 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2014财务年度工作总结
2014/11/11 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
天气温馨提示语
2015/07/14 职场文书
谢师宴家长致辞
2015/07/27 职场文书
高一作文之暖冬
2019/11/09 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
基于redis+lua进行限流的方法
2022/07/23 Redis