详解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 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
js创建对象的方法汇总
Jan 07 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
详解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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP基础知识介绍
2013/09/17 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
给学校建议书范文
2014/05/13 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
政协会议宣传标语
2014/10/09 职场文书
语文教师个人工作总结
2015/02/06 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server