当前位置: 首页 > 编程笔记 >

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

司空鸿熙
2023-03-14
本文向大家介绍webpack打包单页面如何引用的js,包括了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');
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍webpack打包多页面的方法,包括了webpack打包多页面的方法的使用技巧和注意事项,需要的朋友参考一下 前言 一开始接触webpack是因为使用Vue的关系,因为Vue的脚手架就是使用webpack构建的。刚开始的时候觉得webpack就是为了打包单页面而生的,后来想想,这么好的打包方案,只在单页面上使用是否太浪费资源了呢?如果能在传统多页面上使用webpack,开始效率是否会

  • 本文向大家介绍webpack多入口文件页面打包配置详解,包括了webpack多入口文件页面打包配置详解的使用技巧和注意事项,需要的朋友参考一下 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也不尽是如此,有时候也会碰到多页面的项目,而且以我的经验来看,这种情况出现的频率还不低,例如项目比较大,无法进行全局的把握,或者项目需要多次的更新迭代等,

  • 本文向大家介绍如何在页面引用外部的html页面?相关面试题,主要包含被问及如何在页面引用外部的html页面?时的应答技巧和注意事项,需要的朋友参考一下 1.是完整的页面。拥有,。使用 2.是一个页面片段。使用请求。或者使用

  • 我正在使用webpack将一些boostrap和其他css文件捆绑在一起,下面是webpack.config.js文件var htmlWebPack=require('html-webpack-plugin');var ExtractTextPlugin=require(“extract-text-webpack-plugin”); 我引用了main.ts文件中的引导文件夹,如下所示 但是当我运行

  • 本文向大家介绍webpack中引用jquery的简单实现,包括了webpack中引用jquery的简单实现的使用技巧和注意事项,需要的朋友参考一下 1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: 在项目中安装jquery依赖,一定不能少。 以上这篇webpack中引用jquery的简单实现就是小编分享给大家的全部内容了,希望

  • 打印页面包含RichTextBlock。这个RichTextBlock过去包含文本,可以使用以下代码打印。如果页面包含列表框或网格视图,我需要如何打印的帮助。是否可以使用RichTextBlock包含列表框并检测溢出以继续打印?如果您能提供示例、参考或教程,将不胜感激。谢谢 ---更新此列表框将包含以下数据: ItemName ItemCode价格数量。。 ------ ------ ----更新