温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

webpack如何实现多页面配置

发布时间:2021-08-18 14:48:03 来源:亿速云 阅读:157 作者:小新 栏目:web开发

这篇文章主要介绍了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合并,分开生产环境和调试环境

感谢你能够认真阅读完这篇文章,希望小编分享的“webpack如何实现多页面配置”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI