详解如何使用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中的deferred使用方法
Mar 27 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
玩转方法:call和apply
2014/05/08 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python 通配符删除文件的实例
2018/04/24 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python如何生成网页验证码
2018/07/28 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
运动会解说词200字
2014/02/06 职场文书
司法所长先进事迹
2014/06/02 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
标准发言稿结尾
2019/07/18 职场文书