详解如何使用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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 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
ASP知识讲座四
2006/10/09 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
使用python实现省市三级菜单效果
2016/01/20 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
运动会领导邀请函
2014/02/05 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python