详解如何使用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 extend()详解及简单实例
May 06 jQuery
jQuery操作css样式
May 15 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery中event.target和this的区别详解
Aug 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中extract()函数的妙用分析
2012/07/11 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
制作特殊字的脚本
2006/06/26 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
jquery禁用右键示例
2014/04/28 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python最基本的输入输出详解
2015/04/25 Python
解决Django中多条件查询的问题
2019/07/18 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
双十佳事迹材料
2014/01/29 职场文书
小学语文教学反思
2014/02/10 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
大学生毕业评语
2014/12/31 职场文书
运动会广播稿100字
2015/08/19 职场文书
学习委员竞选稿
2015/11/20 职场文书