详解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 相关文章推荐
浮动的div自适应居中显示的js代码
Dec 23 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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简单图像创建入门实例
2015/06/10 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
销售心得体会
2014/01/02 职场文书
2014年保卫工作总结
2014/12/05 职场文书
司考复习计划
2015/01/19 职场文书
出国留学单位推荐信
2015/03/26 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
python中的plt.cm.Paired用法说明
2021/05/31 Python