riskers / Generate Pages
webpack 开发多页面脚手架
Stars: ✭ 51
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Generate Pages
React App Rewired
Override create-react-app webpack configs without ejecting
Stars: ✭ 8,630 (+16821.57%)
Mutual labels: webpack, config
Annotated Webpack Config
This is the companion github repo for the "An Annotated webpack 4 Config for Frontend Web Development" article.
Stars: ✭ 425 (+733.33%)
Mutual labels: webpack, config
Generate Pages Tutorial
教你一步步从零构建 webpack 开发多页面环境
Stars: ✭ 63 (+23.53%)
Mutual labels: webpack, config
Webpack Config Plugins
Provide best practices for webpack loader configurations
Stars: ✭ 529 (+937.25%)
Mutual labels: webpack, config
Webpack Config
Helps to load, extend and merge webpack configs
Stars: ✭ 244 (+378.43%)
Mutual labels: webpack, config
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+1211.76%)
Mutual labels: webpack, config
Panic Overlay
Displays JS errors in browsers. Shows sources. Use with any framework. 💥✨
Stars: ✭ 50 (-1.96%)
Mutual labels: webpack
Bootstrap Loader
Load Bootstrap styles and scripts in your Webpack bundle
Stars: ✭ 1,038 (+1935.29%)
Mutual labels: webpack
Node Env Webpack Plugin
Simplified `NODE_ENV` handling with webpack
Stars: ✭ 51 (+0%)
Mutual labels: webpack
Prepack Webpack Plugin
A webpack plugin for prepack.
Stars: ✭ 1,054 (+1966.67%)
Mutual labels: webpack
Webxr Webpack Boilerplate
Starter Kit for building rich, immersive WebXR projects (featuring A-Frame) PWA with Webpack and SASS
Stars: ✭ 48 (-5.88%)
Mutual labels: webpack
Webvr Webpack Boilerplate
A webvr multi-scenes Single-page application for three.js, webpack
Stars: ✭ 47 (-7.84%)
Mutual labels: webpack
React 5ddm
5d动漫,使用React,服务端渲染,接口(不开源)来自赞片CMS。仅供参考,交流群:14646823 欢迎加入
Stars: ✭ 50 (-1.96%)
Mutual labels: webpack
React Redux Quotlify
A quote browser and manager that allows one to search famous quotes and save them to a data store
Stars: ✭ 47 (-7.84%)
Mutual labels: webpack
Typescript Lib Example
Example of TypeScript library setup for multiple compilation targets using tsc and webpack
Stars: ✭ 50 (-1.96%)
Mutual labels: webpack
Webpack Webextension Plugin
Webpack plugin that compiles WebExtension manifest.json files and adds smart auto reload
Stars: ✭ 47 (-7.84%)
Mutual labels: webpack
Conditioner
💆🏻 Frizz free, context-aware, JavaScript modules
Stars: ✭ 1,053 (+1964.71%)
Mutual labels: webpack
基于 webpack 的开发多页面项目的脚手架,支持:
- 代码热替换
- ES2015
使用
git clone [email protected]:fe-config/generate-pages.git
cd generate-pages
npm install
- 开发:
npm run dev
- 上线:
npm run build
结构
|--- pages // 页面文件
| |--- tpl // 页面模板
| | |--- page1.html
| | |--- page2.html
| |--- views // 添加css、js后的页面模板
| |--- page1.html
| |--- page2.html
|--- src // 页面css、js
| |--- common // 公共模块
| | |--- index.js
| |--- page1
| | |--- main.js
| | |--- style.css
| |--- page2
| |--- main.js
| |--- style.css
|--- map.js // 页面对应js模块映射
|--- .babelrc // babel 配置文件
|--- webpack.config.js // webpack 配置文件
配置
修改 map.js
:
var path = require('path')
var ROOT = path.resolve(__dirname)
module.exports = {
'page1/main': { // 模块名
"src": ROOT + "/src/page1/main", // 对应页面主模块
"tpl": "page1" // 对应模板名
},
'page2/main': {
"src": ROOT + '/src/page2/main',
"tpl": "page2"
}
}
page1/main
: page1/main
对应一个页面,模板对应 pages/tpl/page1.html
,js 模块对应 src/page1/main.js
。
在 src/page1/main.js
中:
// 为了支持修改模板文件文件时页面自动刷新
if(ENV == 'DEV') {
require('pages/views/page1.html')
}
[使用ProvidePlugin](./src/page3/main.js)
import style from './style.css' // 引入css
import common from 'src/common' // 引入common模块
示例
tips
这个项目只搭建了最基本的项目需求,肯定不能保证满足所有项目,你可能需要修改:
- 本项目默认安装
jquery
,如果不需要,请在pageage.json
和webpack.config.js
中删除 -
resolve
- 设置
alias
不会让你的目录出现../../src/page1/main.js
这样难以识别的目录层级
- 设置
-
externals
可以让你正常使用全局script
-
output
-
filename
设置为[name].[md5].js
可能是你想要的 -
publicPath
如果你的 js、css 需要放在 CDN 上,就要修改这个选项了
-
- 如果你要使用 less / sass / postcss ,需要自己安装对应的 loader
- 没有安装 url-loader / file-loader
Have fun in webpack !
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].