详解webpack多页面配置记录


Posted in Javascript onJanuary 22, 2018

之前也写过webpack学习记录,项目中需要一个常用的webpack多页面配置,所以才动手,本着能写一行是一行的原则,开始了配置webpack之旅。

定目录结构

首先我只需要开发环境(包含自动更新)和打包环境,初定的目录结构是这样的

详解webpack多页面配置记录

app主要写业务代码,config里写webpack配置和一些打包、开发的配置,经过一番计较,最后根据自己习惯,目录结构如下:

详解webpack多页面配置记录 

app
 -libs # 第三方插件库,可以是css也可以是js,eg:jq
 -static # 公共的静态资源文件夹
 -temlates # 模板文件夹
  -*** # 模块文件夹
  -css # 当前模块独有的css文件需要在index.js中import
  -html # 模板文件,计划支持html,pug两种模板语言
  -index.js # 当前模块入口文件

配置webpack

按上面所说,建好文件后,在根目录新建webpack.config.js

然后全局安装webpack和webpack-dev-server

npm i webpack webpack-dev-server -g

然后局部安装

npm i webpack webpack-dev-server --save-dev

这样我们的项目就可以引入webpack了,并且可以使用webpack-dev-server的相关功能了,webpack.config.js内容非常的简单,就是根据环境变量中指定的当前环境来加载不同的webpack配置即可:

// 未指定这手动指定为生产环境
process.env.NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV : 'product';
// 获取环境命令,并去除首尾空格
const env = process.env.NODE_ENV.replace( /(\s*$)|(^\s*)/ig, "" );
// 根据环境变量引用相关的配置文件
module.exports = require( `./config/webpack.config.${env}.js` )

在config文件夹下分别新建webpack.config.dev.js和webpack.config.product.js分别代表开发环境的配置和生成打包文件的配置,考虑到很多配置都会相同,再建一个webpack.config.base.js用来写统一的配置。

webpack.config.dev.js和webpack.config.product.js的区别是一个runtime时的配置,一个文件生成的配置,简而言之,就是开发环境的不同是配置webpack-dev-server,生产环境是压缩,map等配置

webpack.config.base.js文件才是webpack配置的主菜,包括entry、output、modules、plugins等

获得所有入口文件的文件夹

function getEntryDir() {
  let globPath = 'app/templates/**/*.' + config.tplLang
  // (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法
  let pathDir = 'app(\/|\\\\)(.*?)(\/|\\\\)html'
  let files = glob.sync( globPath )
  let dirname, entries = []
  for ( let i = 0; i < files.length; i++ ) {
    dirname = path.dirname( files[ i ] )
    entries.push( dirname.replace( new RegExp( '^' + pathDir ), '$2' ) )
  }
  return entries;
}

注入entry和生成HTMLWebpackPlugin

getEntryDir()
  .forEach( ( page ) => {
    let moduleName = page.split( '/' )
    let moduleNameStr = moduleName[ moduleName.length - 1 ]
    const htmlPlugin = new HTMLWebpackPlugin( {
      filename: `${moduleNameStr}.html`,
      template: path.resolve( __dirname, `../app/${page}/html/index.${config.tplLang}` ),
      chunks: [ moduleNameStr, 'vendors' ],
    } );
    HTMLPlugins.push( htmlPlugin );
    Entries[ moduleNameStr ] = path.resolve( __dirname, `../app/${page}/index.js` );
  } )

关于HTMLWebpackPlugin的用法,可以参照html-webpack-plugin用法全解 以及 官方文档 已经写的非常详尽了。

第三方库入口自动获取

function getVendors() {
  let globPath = `app/${config.libraryDir}/**/*.*`
  let files = glob.sync( globPath )
  let libsArr = []
  files.forEach( ( v, i ) => {
    libsArr.push( './' + v )
  } )
  return libsArr
}
Entries[ 'vendors' ] = getVendors() // 第三方类库

其中多页面入口和第三方库配置,请看这篇webpack中文站文档分离 应用程序(app) 和 第三方库(vendor) 入口

output 配置

output: {
 filename: "static/js/[name].bundle.[hash].js",
 path: path.resolve( __dirname, config.devServerOutputPath )
}

webpack配置合并

主要用到一个webpack插件 webpack-merge,可把分开配置的config合并,分开生产环境和调试环境

最后奉上github地址: webpack-multi-skeleton ,有不对之处,请指正!

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

Javascript 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
微信小程序实现刷脸登录
May 25 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
详解html-webpack-plugin用法全解
Jan 22 #Javascript
js构造函数创建对象是否加new问题
Jan 22 #Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 #Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 #Javascript
Angular17之Angular自定义指令详解
Jan 21 #Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 #Javascript
详解node.js中的npm和webpack配置方法
Jan 21 #Javascript
You might like
我用php+mysql写的留言本
2006/10/09 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Python基于内置函数type创建新类型
2020/10/22 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
护士的自我鉴定
2014/02/07 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
小学班主任培训方案
2014/06/04 职场文书
伦敦奥运会口号
2014/06/13 职场文书
4s店活动策划方案
2014/08/25 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
党支部综合考察意见
2015/06/01 职场文书
实验心得体会范文
2016/01/25 职场文书