详解如何使用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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
社会稳定风险评估方案
2014/06/02 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python