前言
@beisen/shuttle-box 是一个基于 Webpack4 的多页面脚手架,支持自定义模板、postcss预处理器、模块热替换等功能。它可以帮助前端开发人员很好的进行多页面应用开发。这篇文章将介绍如何使用 @beisen/shuttle-box 这个 npm 包。
安装
使用 npm 安装:
--- ------- ------------------- --
使用
创建一个多页面项目:
----------- ------ ----------- -- ----------- --- -------
启动开发服务器:
--- --- ---
构建生产环境:
--- --- -----
文件结构
--- ----- - ------- ---- --- ---- - ------- - --- ------ - --- ---------- --- ------ - ----- - --- ----------- - --- ---------- --- --- - ---- - --- ------ - ---- - - --- --- - --- -- - - --- ---- - ---- - - --- --- - ---- - - --- -- - -- -- - --- ---------- - -- - - --- --- - --- -- - --- ----- - -- - - --- ----- - -- - - --- -------- - ------ - - --- ---------- - ------ - --- ----- - --- - --- -------- - ---- --- ------------ --- ----------------- - ------- ---- --- ---------
自定义模板
默认模板是 public/index.html
,你可以根据需要自定义模板。模板中可以使用模板变量替换,模板变量是 htmlWebpackPlugin.options
对象的属性,具体可以参考 html-webpack-plugin。
在模板中使用模板变量时,需要用到 ejs 语法,也就是以下形式:
--- ---- --
例如,我们可以定义一个变量,然后在模板中使用这个变量:
-- --------------- -------------- - - ------ - ------ -------- ----- - - ----- -------------- -------- -------- ---- --- - -- --------- -------------------- -- ---- --------- ------------ -- ----- - -
然后,在 public/index.html
中使用:
------ -- --- ---- - -- ------------------------------- - -- ----- --- -------------------------------------- ------- ----------------------------------------- ---- -- - -- ---------- ------------------------------- ---------- -------
postcss 预处理器
除了 css 之外,@beisen/shuttle-box 还支持使用 postcss 预处理器。你可以通过修改 postcss.config.js
文件来添加预处理器,例如:
-------------- - - -------- - -------------------- ---------------------------- ------------------------------- ------ - --- -------------------- ------- --------- -- - -
模块热替换
@beisen/shuttle-box 支持模块热替换(HMR),它允许在应用运行时替换模块,而无需刷新整个页面。这个功能非常有用,可以提高开发效率。
结语
通过以上介绍,你应该已经知道了如何使用 @beisen/shuttle-box 这个 npm 包。它为我们提供了一个非常好的多页面应用模板,可以让我们更加专注于业务开发,而不用再去关心配置。如果你是一个前端开发人员,那么不妨试试看吧!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600560e281e8991b448df226