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

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打包老项目,那种jquery的,然后多页面的 这种的话要怎么定义入口呢,也不知道哪个是入口,入口一般都是有相应的和html同名的js文件,但是老项目是没有的,当然可以用htmlwebpackplugin生成多个html文件,但是它里面用哪些模块呢,也不知道入口,这种有没有什么解决方案呢,要是有例子的话就更好了 用了htmlwebpackplugin 老项目中每个page底下的html

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

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

  • webpack-obfuscator 打包卡住了 如何解决?

  • "webpack-obfuscator": "2.6.0" 更新到生产环境发现有一个页面打不开,我排除掉node_modules,但是好像不生效,不知道什么原因。 有问题的页面用到了tinymce和moment 怎么解决?