详解如何使用webpack打包多页jquery项目


Posted in jQuery onFebruary 01, 2019

虽然已经2019年了
不过有一些项目
还是需要用到jquery的
不过考虑到使用jquery的一堆兼容性问题
也为了可以顺利地使用ES6来撸代码
研究使用webpack+babel打包代码来发布

几个重点:

1.为了将模块分割加载,不至于一个js文件过大,一个页面中使用多个js文件
2.由于是多页项目(多个html),每个页面使用的js文件都不一致
基于以上两点,需要配置多个入口文件
3.会把小图片转换成base64,所以可能css转成的js文件会比较大,所以css文件都单独设置入口js

例如,我们有三个页面:index、share、assist

三个页面有通用的css文件:common.css

设置入口文件时,可以这样设置

entry: {
  // 通用css
  commoncss: path.resolve(__dirname, './src/css/common.css.js'),

  // 主页
  indexcss: path.resolve(__dirname, './src/css/index.css.js'),
  index: path.resolve(__dirname, './src/index.js'),

  // 页1
  sharecss: path.resolve(__dirname, './src/css/share.css.js'),
  share: path.resolve(__dirname, './src/share.js'),

  // 页2
  assistcss: path.resolve(__dirname, './src/css/assist.css.js'),
  assist: path.resolve(__dirname, './src/assist.js'),

}

其中,common.css.js文件中,只有几行代码

import '../css/base.css';
import '../css/plugin.css';
import '../css/common.css';

common.css.js文件结束

由于会有一些图片的base64,所以大小大约100+KB

类似的还有index.css.js和share.css.js和assist.css.js
index.css.js如下

import '../css/index.css';

对,就一句话

打包出来的js文件大小就看引入了多少小图片了,一般几百KB

然后,要使用三个webpack的插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const jquery = require('jquery');

HtmlWebpackPlugin 用于打包出多个html文件

CopyWebpackPlugin 用于img标签,后面说

jquery 就是jquery,全局引用

webpack.config.js里的plugins配置如下

plugins: [
  new webpack.ProvidePlugin({
    $:"jquery"
  }),
  new CopyWebpackPlugin([{
    from: __dirname + '/src/public/'
  }]), // 吧src下public文件夹下的所有内容直接拷贝到dist(输出目录)下
  new HtmlWebpackPlugin({
    filename: 'index.htm',
    template: 'src/index.html',
    chunks: ['commoncss', 'indexcss', 'index'],
    inject: 'true',
    hash: true,
  }),
  new HtmlWebpackPlugin({
    filename: 'share.htm',
    template: 'src/share.html',
    chunks: ['commoncss', 'sharecss', 'share'],
    inject: 'true',
    hash: true,
  }),
  new HtmlWebpackPlugin({
    filename: 'assist.htm',
    template: 'src/assist.html',
    chunks: ['commoncss', 'assistcss', 'assist'],
    inject: 'true',
    hash: true,
  })
]

src目录下的文件如下

详解如何使用webpack打包多页jquery项目

index.js assist.js share.js是三个文件分别的入口文件

index.html assist.html share.html是三个文件的模板,html代码可以写在这里(当然想用模板文件也是可以的,只要HtmlWebpackPlugin插件支持)

dist文件夹如下

详解如何使用webpack打包多页jquery项目

(为什么是htm而不是html,是为了便于读者区分模板文件和输出文件)

我们知道,webpack打包不会打包HtmlWebpackPlugin的template里的img标签下的图片,所以在html里使用了img标签的图片都要放在public文件夹下,CopyWebpackPlugin这个组件会直接把图片复制过去

关于HtmlWebpackPlugin的具体参数的细则可以上网搜一下,很多这方面的内容
其他的比如loader、babel不在这篇文章想说的重点之列,不赘述

最后,附上webpack.config.js文件

let actName = 'yourProjectName';// 
  let actKV = {
    name: actName,
    entry: {
      // 通用css
      commoncss: path.resolve(__dirname, './src/css/common.css.js'),

      // 主页
      indexcss: path.resolve(__dirname, './src/css/index.css.js'),
      index: path.resolve(__dirname, './src/index.js'),

      // 分享页1
      sharecss: path.resolve(__dirname, './src/css/share.css.js'),
      share: path.resolve(__dirname, './src/share.js'),

      // 分享页2
      assistcss: path.resolve(__dirname, './src/css/assist.css.js'),
      assist: path.resolve(__dirname, './src/assist.js'),

    }
  };
  

  return {
    entry: actKV.entry,
    target: "web",
    output: {
      path: path.resolve(__dirname + '/dist/'+actName),
      // publicPath: '.\\',
      filename: 'js/[name].js',
      // chunkFilename: "[name].chunk.[hash].js",
    },
    plugins: [
      new webpack.ProvidePlugin({
        $:"jquery"
      }),
      new CopyWebpackPlugin([{
        from: __dirname + '/src/public/'
      }]),
      new HtmlWebpackPlugin({
        filename: 'index.htm',
        template: 'src/index.html',
        chunks: ['commoncss', 'indexcss', 'index'],
        inject: 'true',
        hash: true,
      }),
      new HtmlWebpackPlugin({
        filename: 'share.htm',
        template: 'src/share.html',
        chunks: ['commoncss', 'sharecss', 'share'],
        inject: 'true',
        hash: true,
      }),
      new HtmlWebpackPlugin({
        filename: 'assist.htm',
        template: 'src/assist.html',
        chunks: ['commoncss', 'assistcss', 'assist'],
        inject: 'true',
        hash: true,
      })
    ],
    mode: 'development',
    node: {
      __filename: true,
      __dirname: true
    },
    devtool: isProduction ? 'source-map':'inline-source-map',
    devServer:{
      inline: true,
      open: true, 
      historyApiFallback: true, 
      // host: ip.address(),
      host: 'localhost',
      progress: true,
      contentBase: "./dist/",
      port: 3430,
      historyApiFallback:true,
      publicPath:'/src/',
      proxy: {
        '*': {
          target: 'http://127.0.0.1:3430',
          secure: false
        }
      },
    },
    resolve: {
      alias: {
      },
      extensions: ['.js', '.less', '.css', '.vue', '.jsx'],
    },
    externals: {
    },
    module: {
      rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
      }, {
        test: /\.js$/,
        include: path.join(__dirname,'/src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use:[
          {
            loader: 'babel-loader',
            query: {
              presets: ['es2015']
            }
          }
        ]
      }, {
        test: /\.xml$/,
        loader: "xml-loader"
      }, {
        test: /\.(css|less)$/,
        loader: "style-loader!css-loader",
      }, 
      {
        test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
        loader: 'url-loader',
        options: {
          limit: 16384,
          name: 'images/[name].[hash:5].[ext]',
        }
      },
      {
        test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
        loader: "file-loader?&name=assets/fonts/[name].[ext]"
      }, {
        test: /\.txt$/,
        loader: "text-loader"
      },{
        test: /\.jsx$/,
        exclude: /node_modules/,
        loaders: ['jsx-loader', 'babel-loader']
      }]
    },
    
  }

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

jQuery 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JQuery中queue方法用法示例
Jan 31 #jQuery
AJAX在JQuery中的应用详解
Jan 30 #jQuery
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python创建和删除目录的方法
2015/04/29 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python 元组的使用方法
2020/06/09 Python
python中remove函数的踩坑记录
2021/01/04 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
高一历史教学反思
2014/01/13 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
公务员培的训心得体会
2014/09/01 职场文书
机器人总动员观后感
2015/06/09 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
解析目标检测之IoU
2021/06/26 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
python数字图像处理:图像简单滤波
2022/06/28 Python