Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions

Stars: ✭ 111 (-3.48%)

Mutual labels: postcss

Postcss Font Family System Ui

PostCSS plugin to transform W3C CSS font-family: system-ui to a practical font-family list

Stars: ✭ 91 (-20.87%)

Mutual labels: postcss

Postcss Uncss

Use uncss as a postcss plugin

Stars: ✭ 105 (-8.7%)

Mutual labels: postcss

Fuzzymail

📨 Email template generator. Making emails fun again.

Stars: ✭ 114 (-0.87%)

Mutual labels: postcss

Postcss Instagram

📷 PostCSS plugin for using Instagram filters in CSS

Stars: ✭ 111 (-3.48%)

Mutual labels: postcss

Elm Batteries

Learn how Elm, Parcel, Cypress and Netlify work together. Get started with Elm navigation, routes, remote data and decoder.

Stars: ✭ 108 (-6.09%)

Mutual labels: postcss

View All Similar Projects ➔

webpack4-cli

webpack4-cli 基于[email protected]，此cli可提供:

更加灵活的、切近实际工作流的目录结构, 既可单页也可多页.
更全面的构建功能（runtime-chunk、postcss、sass、less、gulp图片压缩、bundle分析、TS、vue-ts、react等）.
更高的扩展性，构建目标html快速定义、重写机制、cdnURL定制等.
更活跃、稳定的更新等.
基于实际工作流（不拿实际需求Coding都是耍流氓）
提供 Docker Image 供快速构建

如果此cli帮助到您，欢迎给星，您的星星是我持续更新的动力！

快速构建

注：若不使用Docker，可跳过此项，直接进入快速使用。

拉取镜像

    docker pull pomelott/webpack-cli

启动开发环境

注：以下文件目录可在本机自行创建，能够提供文件夹供容器挂载即可。

/Users/tate/Documents/work/geek/docker/ws/src: 用于存放资源文件，修改文件可验证启动热更新
/Users/tate/Documents/work/geek/docker/ws/page: 用于存放html及入口构建相关文件

    docker run -it -v /Users/tate/Documents/work/geek/docker/ws/src:/home/webpack4-cli/src -v /Users/tate/Documents/work/geek/docker/ws/page:/home/webpack4-cli/page -p 8090:8090 --env WEBPACK_MODE=dev pomelott/webpack-cli

在宿主机浏览器访问 localhost:8090/page/index.html 即可。

启动编译环境

启动容器在后台执行

    docker run -itd pomelott/webpack4-cli /bin/bash

查看容器id

    docker ps

执行构建

    docker exec -it -w /home/webpack4-cli b7c2b83ed900 /bin/bash

导出build后文件

    docker cp b7c2b83ed900:/home/webpack4-cli/dist ./

快速使用

下载依赖（建议yarn）

    yarn install

    npm install

开发模式

    npm run dev

生产模式

    npm run build

压缩图片

    npm run min-img

输出dll

    npm run dll

bundle分析

    npm run analyze

在实际工作中使用 & 自定义 HTML

cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个页面就是一个文件夹。首先介绍一个html文件夹下可以存放的三个文件：

entry.js 为本页面的资源入口（无论使用哪种方式定制HTML，此文件都必须存在）
param.js 为默认模板传递参数（如果你想快速定制HTML，这是个不错的选择）
page.html 用于重写HTML，若此文件存在，cli将会将page.html的优先级提至最高，用以替代默认模板。

你可以通过以下两种方式自定义HTML：

使用param.js 和 entry.js

如果param.js存在，cli则会将param.js中的参数与pug引擎模板结合产出对应HTML，entry.js中引入的资源（js,css）将会被通过标签插入至对应HTML中。

param.js 中的配置项如下，你也可以通过快速查看demo中的代码例子来快速上手： | Name | Type | Default | Description | |:---:|:---:|:---:|:---:| | title | String | 'multipage-cli' | 标题内容 | | tag | Object | {meta: [],eadLink: [],headScript: [],bodyLink: [],bodyScript: []} | 控制插入在html中的资源标签 | | tag.meta | Array | [] | control meta tag | | tag.headLink | Array | [ ] | control link tag in head section | | tag.headScript | Array | [ ] | control script tag in head section | | tag.bodyLink | Array | [ ] | control link tag in body section | | tag.bodyScript | Array | [ ] | control script tag in body section | | vueInit | Object | {} | 初始化vue根节点 | | vueInit.el | String | undefined | vue根实例的el值，如”#app“ | | vueInit.entrance | String | undefined | vue根实例的入口组件，可详见vue-demo | | reactInit | Object | {} | 初始化react根节点 | | reactInit.el | String | undefined | react根实例的el值，如”#root“ 可详见react-demo |

    // for detai code, you can view vueDemo in dev mode
    module.exports = {
        title: 'Example in multipage',
        tag: {
            meta: [{
                name: 'pwebpack4-cli',
                content: 'vueDemo'
            }, {
                name: "webpack4-cli",
                content: 'https://github.com/pomelott/webpack4-cli'
            }],
            headLink: [{
                rel: "icon",
                type: "image/png",
                href: 'https://vuejs.bootcss.com/images/logo.png'
            },{
                href: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css',
                rel: "stylesheet"
            }]
        },
        vueInit: {
            el: '#app',
            entrance: 'example'
        }
    }

    <!doctype html>
    <html lang="en">

    <head>
        <title>Example in Multipage</title>
        <meta name="twebpack4-cli" content="vueDemo" />
        <meta name="webpack4-cli" content="https://github.com/pomelott/webpack4-cli" />
        <link rel="icon" type="image/png" href="https://vuejs.bootcss.com/images/logo.png" />
        <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="http://www.cdn-plugin.com/assets/css/entry/example/vueDemo.css?v=2466d76ff005024cce26">
    </head>

    <body>
        <div id="app">
            <div is="example"></div>
        </div>
        <script src="http://www.cdn-plugin.com/assets/js/runtime/runtime-vueDemo.js?v=2466d76ff005024cce26"></script>
        <script src="http://www.cdn-plugin.com/assets/js/common/vendors.js?v=5b4f3badf8d6ddb0036f"></script>
        <script src="http://www.cdn-plugin.com/assets/js/entry/example/vueDemo.js?v=8df1c19f97ce1a9abf72"></script>
    </body>

    </html>

使用 page.html 和 entry.js

使用page.html 意味着，完全的定制化，你需要完全重写HTML

在实际工作中使用 & 自定义env

提醒

你可以自定义你的page目录，可根据业务模块嵌套等等。并且输出的html目录也会动态变化。以下有个例子可以帮助您理解，您也可以在cli中尝试

    Root
    └───src
    │———node_modules
    |———page   // html dir
    |    |———moduleOne
    |    |     |———PageOne
    |    |     |    |———param.js
    |    |     |    └———entry.js
    |    |     └———pageTwo
    |    |          |———page.html
    |    |          └———entry.js
    |    |———moduleTwo
    |    |     |———PageThree 
    |    |     |    |———param.js  
    |    |     |    └———entry.js  
    |    |     └———pageFour
    |    |          |———param.js  
    |    |          └———entry.js

输出路径也会自动变化（包括html和静态资源）

    Root 
    |———dist   // output root
    |    |——— js
    |    |     |———common
    |    |     |    └——— vendor.js
    |    |     |———entry  // html unique chunk
    |    |     |    |——— moduleOne
    |    |     |    |       |——— pageOne.js
    |    |     |    |       └——— pageTwo.js
    |    |     |    └——— moduleTwo
    |    |     |            |——— pageThree.js
    |    |     |            └——— pageFour.js
    |    |     └———runtime
    |    |          |——— runtime-pageOne.js
    |    |          |——— runtime-pageTwo.js
    |    |          |——— runtime-pageThree.js
    |    |          └——— runtime-pageFour.js
    |    |——— css
    |    |     |——— ...   // css dir is the same as js
    |    |    ...

src/assets路径用以存放静态文件，例如txt文档等，此路径下的文件将不会被打包，并会原样输出至dist下。
你可以在gulpfile下手动选择压缩插件，通常默认选项就可满足需要。
你可以再 postcss.config.js中自定义, 现在, autoprefixer 已被配置.
注意你的环境版本,
建议使用yarn安装模块包，这将会让你在多人项目中减少因版本不一致带来的问题。

核心插件

希望在以下插件中得到更多支持，欢迎给星：

友情链接

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].

Stars: ✭ 115

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (6) 🔗