webpack打包多页面的方法


Posted in Javascript onNovember 30, 2018

前言

一开始接触webpack是因为使用Vue的关系,因为Vue的脚手架就是使用webpack构建的。刚开始的时候觉得webpack就是为了打包单页面而生的,后来想想,这么好的打包方案,只在单页面上使用是否太浪费资源了呢?如果能在传统多页面上使用webpack,开始效率是否会事半功倍呢?好在众多优秀的前端开发者已经写了许多demo和文章供人学习。我也写了一个小项目,希望对大家学习webpack有帮助。

好吧其实上面说的都是废话,接下来附上项目地址和干货,配合食用更佳。

webpack-multi-page

项目解决的问题

  • SPA好复杂,我还是喜欢传统的多页应用怎么破?又或是,我司项目需要后端渲染,页面模板怎么出?
  • 每个页面相同的UI布局好难维护,UI稍微改一点就要到每个页面去改,好麻烦还容易漏,怎么破?
  • 能不能整合进ESLint来检查语法?
  • 能不能整合postcss来加强浏览器兼容性?
  • 我可以使用在webpack中使用jquery吗?
  • 我可以使用在webpack中使用typescript吗?

src目录对应dist目录

webpack打包多页面的方法

当我们使用webpack打包多页面,我们希望src目录对应打包后dist目录是如上图这样的,开发根据页面模块的思路搭建开发架构,然后经过webpack打包,生成传统页面的构架。

/**
 * 创建打包路径
 */
const createFiles = function() {
 const usePug = require('../config').usePug;
 const useTypeScript = require('../config').useTypeScript;
 const path = require('path');
 const glob = require('glob');
 const result = [];
 const type = usePug ? 'pug' : 'html';
 const scriptType = useTypeScript ? 'ts' : 'js';
 const files = glob.sync(path.join(__dirname, `../src/views/**/*.${type}`));
 for (file of files) {
  result.push({
   name: usePug ? file.match(/\w{0,}(?=\.pug)/)[0] : file.match(/\w{0,}(?=\.html)/)[0],
   templatePath: file,
   jsPath: file.replace(type, scriptType),
   stylePath: file.replace(type, 'stylus')
  });
 }
 return result;
};

利用这个方法,我们可以获得需要打包的文件路径(方法中获取文件路径的模块也可使用fs模块),根据获得打包的文件路径,我们可以使用html-webpack-plugin来实现多页面打包。

由于每一个html-webpack-plugin的对象实例都只针对/生成一个页面,因此,我们做多页应用的话,就要配置多个html-webpack-plugin的对象实例:

const plugins = function() {
 const files = createFiles();
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');

 let htmlPlugins = [];
 let Entries = {};
 files.map(file => {
  htmlPlugins.push(
   new HtmlWebpackPlugin({
    filename: `${file.name}.html`,
    template: file.templatePath,
    chunks: [file.name]
   })
  );
  Entries[file.name] = file.jsPath;
 });

 return {
  plugins: [
   ...htmlPlugins,
   new ExtractTextPlugin({
    filename: getPath => {
     return getPath('css/[name].css');
    }
   })
  ],
  Entries
 };
};

由于我使用了ExtractTextPlugin,因此这些CSS代码最终都会生成到所属chunk的目录里成为一个CSS文件。

模版引擎

每个页面相同的UI布局好难维护,UI稍微改一点就要到每个页面去改,好麻烦还容易漏,怎么破?

考虑到这个问题,项目引进并使用了pug模版引擎。

现在,我们可以利用pug的特性,创建一个共用组件:

demo.pug

p 这是一个共用组件

然后,当你需要使用这个公用组件时可以引入进来:

include 'demo.pug'

除此之外,你还可以使用一切pug特供的特性。

webpack中配置pug也很简单,先安装:

npm i --save-dev pug pug-html-loader

然后将所有.html后缀的改为.pug后缀,并且使用pug语法。

然后在规则中再增加一条配置

{
  test: /\.pug$/,
  use: 'pug-html-loader'
}

同时把plugins对象中的用到index.html的HtmlWebpackPlugin中的template,也要改成index.pug。

webpack整合eslint

先放出配置代码:

if (useEslint) {
 loaders.push({
  test: /\.js$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [path.resolve(__dirname, 'src')],
  options: {
   formatter: require('stylish')
  }
 });
}

通过webpack整合ESLint,我们可以保证编译生成的代码都是没有语法错误且符合编码规范的;但在开发过程中,等到编译的时候才察觉到问题可能也是太慢了点儿。

因此我建议可以把ESLint整合进编辑器或IDE里,像我本人在用vs code,就可以使用一个名为Eslint的插件,一写了有问题的代码,就马上会标识出来。

dev环境与prod环境

首先,阅读webpacl项目的时候通常要先看package.json这个文件。因为当你在命令行敲下一句命令

npm run dev

webpack就会找到package.json文件中的script属性并依次分析命令,可见,这句命令相应的会执行

nodemon --watch build/ --exec \"cross-env NODE_ENV=development webpack-dev-server --color --progress --config build/webpack.dev.js\"

同样的,当写下命令

npm run build

script就会执行

ross-env NODE_ENV=production webpack --config build/webpack.prod.js

这样就能区分开发环境,或是生产环境了。

虽然我们会为环境做区分,但是基于不重复原则,项目为两个环境公用的配置整合到了(build/webpack.base.js)文件中。然后利用webpack-merge插件将配置整合在一起

webpack中使用jquery

在webpack中使用jquery也很简单,我们可以在loaders中增加一条配置:

if (useJquery) {
 loaders.push({
  // 通过require('jquery')来引入
  test: require.resolve('jquery'),
  use: [
   {
    loader: 'expose-loader',
    // 暴露出去的全局变量的名称 随便你自定义
    options: 'jQuery'
   },
   {
    // 同上
    loader: 'expose-loader',
    options: '$'
   }
  ]
 });
}

然后当你需要在某个js文件使用jq时,引用暴露出来的变量名即可:

import $ from 'jQuery';

webpack中使用typescript

在webpack中使用jquery也很简单,我们可以在loaders中增加一条配置:

if (useTs) {
 loaders.push({
  test: /\.tsx?$/,
  use: 'ts-loader',
  exclude: /node_modules/
 });
}

然后将js文件改为ts即可。

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

Javascript 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
JSONP基础知识详解
Mar 19 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
实例讲解JavaScript截取字符串
Nov 30 #Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 #Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 #Javascript
You might like
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
python requests指定出口ip的例子
2019/07/25 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
应聘教师自荐书
2014/06/16 职场文书
新课培训心得体会
2014/09/03 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2014年绿化工作总结
2014/12/09 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书