详解webpack多页面配置记录

2024-09-27 13:59:10

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

定目录结构

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

app主要写业务代码，config里写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,有不对之处，请指正！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解webpack4多入口、多页面项目构建案例

趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi
详解使用webpack构建多页面应用

关于webpack的配置和使用,网上已经有许多文章了,大多是在讲单页应用,当我们需要打包多个html时,事情就变得麻烦起来.怎么在webpack-dev-server里使用路由?怎么打包多个html和js chunk并自动更新md5?本文讲的就是如何解决这些问题. 这里假设你对Webpack已经有最基础的了解需求来看下我们的需求: 使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由,访问/a时候显示a.html,/b显示b.html 打
浅谈如何使用webpack构建多页面应用

前言之前使用 vue2.x + webpack3.x 撸了一个 vue 单页脚手架 vue 版 spa 脚手架有兴趣的同学可以看下,内附详细注释,适合刚学习 webpack 的童鞋. react 版 spa 脚手架但在一些场景下,单页应用显然无法满足我们的需求,于是便有了 mulXc-cli 好了,废话不多说,进入正题!!!! 文件结构 ├── build 构建服务和webpack配置 ├──── build.js 构建全量压缩包 (打包项目) ├──── setting.js 多页面入
WebPack配置vue多页面的技巧

WebPack虐我千百遍,我带她如初恋.一个项目前台页面写差不多了,webpack几乎零配置,也算work起来了.现在需要编写后台管理界面,另起一个单独的项目,那是不存在的.于是网上了搜了大把大把的文章,很多都是修改了项目的结构,讨厌,vue-cli搞的那一套,干嘛要修改来修改去的.像我这种前端小萌新,webpack的配置改着就把前台部分run不起来了... 于是就有了这个笔记: 先看看项目的结构: ├── build ├── config ├── src │ ├── api │ ├──
详解webpack 多页面/入口支持&公共组件单独打包

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com
webpack多页面开发实践

写在前面 webpack是一款模块加载器兼打包工具,能把js,css,页面,图片,视频等各种资源,进行模块化处理.而现在网上流传很多单页面的webpack模型,那多页面呢?比较少,现在我提供一个多页面的前端模型.希望大家适合使用. 在最开始接触webpack的时候,我都觉得webpack只适用于单页面应用,比如webpack+react,webpack+vue.我自己在使用webpack+vue构建项目及开发的过程中感受到了webpack的强大和方便.基于实际项目需求,我在想,多页面站点是否也能
详解webpack编译多页面vue项目的配置问题

本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,
详解webpack多页面配置记录

之前也写过webpack学习记录,项目中需要一个常用的webpack多页面配置,所以才动手,本着能写一行是一行的原则,开始了配置webpack之旅. 定目录结构首先我只需要开发环境(包含自动更新)和打包环境,初定的目录结构是这样的 app主要写业务代码,config里写webpack配置和一些打包.开发的配置,经过一番计较,最后根据自己习惯,目录结构如下: app -libs # 第三方插件库,可以是css也可以是js,eg:jq -static # 公共的静态资源文件夹 -temlates
详解webpack babel的配置

Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用首先
详解webpack 多入口配置

同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 npm run dev,首先我们要理解webpack打包主要是针对js,查看下面生成的配置,首页是index.html,模版用的index.html,入口文件用的mian.js //file build/webpack.base.conf.js //entry 配置 module.exports =
详解webpack之scss和postcss-loader的配置

本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **
详解webpack 打包文件体积过大解决方案（code splitting）

优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码问题: 开发环境用webpack后发现单个js文件
详解webpack 入门与解析

每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但
vue相关配置文件详解及多环境配置详细步骤

1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa
详解Linux 主机网络接入配置

详解Linux 主机网络接入配置前言: 网络配置是我们在安装好操作系统之后,需要解决的第一步.现时代没有接入网络的主机已然等同于一堆废铁.在网络配置的过程中,通常我们需要配置本机IP地址,缺省网关,DNS,主机名等等.本文主要描述在Linux环境下,主要以传统命令行方式讲解如何将主机接入网络.对于网路配置的新命令如ip,nmcli等等在以后的文章中描述. 一.网络配置概述主机接入互联网前提:遵循TCP/IP协议栈配置主机接入TCP/IP网络需要配置的内容: IP/Netmask 路
详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

详解webpack多页面配置记录

相关推荐

随机推荐