biyuqi / webpack-seed Goto Github PK

View Code? Open in Web Editor NEW

115.0 11.0 40.0 2.99 MB

:rocket: A Multi-Page Application base on webpack and babel. webpack搭建基于ES6,支持模板的多页面项目

Home Page: https://biyuqi.github.io/webpack-seed/

License: MIT License

JavaScript 9.28% CSS 42.39% Handlebars 0.14% SCSS 3.39% EJS 44.80%

webpack4 webpack babel sass ejs ejs-loader axios babel7 webpack-multipage webpack-multi-page

webpack-seed's Introduction

前言

开箱即用的多页面模板, 基于 webpack4 babel7 开发可复用的现代化网站, 解决非 SPA 应用, html 复用, 模块化开发编译等问题.

如果感兴趣该项目, 请点个 star

及时关注项目更新, 请点个 watch

项目 bug, 请提 issue

新版本 2.x

使用webpack-chain进行构建程序
重构整体页面配置, 包括模板的创建, 静态第三方资源的引入方式
全新的变量管理方式, 类 vue-cli 脚手架的配置, 自动读取根目录的环境变量文件.env[mode]
支持在ws.config.js进行全局的配置打包等配置, 具体可参考 vue.config.js 配置方式

特性

支持前后端分离开发
配置完整的打包方案
支持本地开发热更新
EJS 模板编译
图片处理压缩
内置 Sass 开发环境
集成代码风格校验 Eslint
内置字体图标库 500+, 开箱即用
支持 ES6 语法，编译生成生产代码
支持开发(生产)环境变量注入(基于.env.[mode]文件,类似于 Vue-CLI 脚手架提供的方案)
通用的构建方式, 基本是开箱即用. 同时支持通过ws.config.js进行灵活的构建配置
...

注：本项目引入了 jquery, bootstrap，该文件配置可自动加载第三方脚本作为链接使用(script 标签的形式引入), 如果需要,在 src/common/lib/index.js 配置即可

项目结构

webpack-seed
├── dist # 输出目录
├── bin # 创建页面命令
├── build # webpack构建目录
├── src # 项目主目录
├── .editorconfig
├── .env.github # 环境变量配置
├── .env.prod # 环境变量配置
├── .env.staging # 环境变量配置
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmrc # npm源
├── .postcssrc.js
├── .prettierignore
├── .prettierrc.js
├── .travis.yml # CI当前项目demo部署
├── favicon.ico
├── LICENSE
├── README.md
├── babel.config.js # babel配置
├── package.json
├── ws.config.js # 可通过该配置改webpack等配置
└── yarn.lock

输出

dist
├── css
├── favicon.ico
├── fonts
├── html
├── image
├── index.html
├── js
└── libs

使用

下载使用

git clone https://github.com/BiYuqi/webpack-seed.git

cd webpack-seed

yarn install

本地开发(dev)

yarn run serve

打包(build)

yarn run build

配置文件

# 具体配置和vue.config.js一致
ws.config.js

环境变量

# 具体配置和vue-cli配置方式一致
.env[mode]

TODO

测试框架默认 Jest
编写创建项目的脚手架, eslint, jest, 等配置可选
优化 webpack 配置流程, 尽量黑盒化, 约定大于配置
文档补充

webpack-seed's People

Contributors

Stargazers

Watchers

Forkers

iconwave sk-hong jimixy zhangpengdeshu zhangkaisi 83104101double108121 blanclang xdlover xiaohui108 yefengbar bluefantasy728 liaoliaojun singod mapleleat chenyuncai kunjun tiger6 mq1024 jc784999074 god-c jacky112 seeiknow lihongmi anyaaa xiangxiong paperscz wqb2017 tutufeier supermars01 zhangaofei hetz hunshikan beyai itrainhub 454979849 blackmack kkxiaojun yuanqu1208 happyqu rick-ra

webpack-seed's Issues

关于 windows平台下 warning Delete `␍` prettier/prettier（eslint配置的一些问题）

报错截图

解决办法

使用git执行以下命令关掉自动转化（git默认是打开的）
1、git config --global core.autocrlf false
2、删除代码重新git clone https://github.com/BiYuqi/webpack-seed

原因

在window系统中，clone代码下来，会自动把换行符LF(linefeed character) 转换成回车符CRLF(carriage-return character)。这时候我们本地的代码都是回车符。

参考网址：https://blog.csdn.net/LPLIFE/article/details/105655178

yarn run serve 又出现了新的报错

ERROR in Entry module not found: Error: Can't resolve './src' in 'D:[Code_Dev]\webpack-seed-1'

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src
Module not found: Error: Can't resolve './src' in 'D:[Code_Dev]\webpack-seed-1'
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]

configuration.entry should be an non-empty object.
-> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: webpack-dev-server --open --inline --mode development --config build/webpack.dev.config
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.