Skip to content

🌈 Webpack4 + Vue/React + TS (SPA or MPA) 面向实际工作流(开发 & 编译 & 打包 & 部署 & 上线)的脚手架,并提供docker镜像供快速构建。

License

Notifications You must be signed in to change notification settings

pomelott/webpack4-cli

Repository files navigation

webpack4-cli

webpack-versioin node-versioin npm-versioin

webpack4-cli 基于webpack@4,此cli可提供:

  1. 更加灵活的、切近实际工作流的目录结构, 既可单页也可多页.
  2. 更全面的构建功能(runtime-chunk、postcss、sass、less、gulp图片压缩、bundle分析、TS、vue-ts、react等).
  3. 更高的扩展性,构建目标html快速定义、重写机制、cdnURL定制等.
  4. 更活跃、稳定的更新等.
  5. 基于实际工作流(不拿实际需求Coding都是耍流氓)
  6. 提供 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 即可。

启动编译环境

  1. 启动容器在后台执行
    docker run -itd pomelott/webpack4-cli /bin/bash
  1. 查看容器id
    docker ps
  1. 执行构建
    docker exec -it -w /home/webpack4-cli b7c2b83ed900 /bin/bash
  1. 导出build后文件
    docker cp b7c2b83ed900:/home/webpack4-cli/dist ./

快速使用

  • 下载依赖(建议yarn)
    yarn install

or

    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: 'webpack4-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="webpack4-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

在根路径的 cli-config.js 文件中自定义env,详细选项如下:

Name Type Default Description
dev.port String '8090' 开发环境端口 (这是8090的时代)
dev.host String 'localhost' devServer host
dev.htmlAssetsAbsolutePath Boolean|String false 控制dev环境下,编译后HTML中资源标签的根路径,如果为false则常规使用相对路径(dev一般使用相对路径)
build.htmlAssetsAbsolutePath Boolean|String false 控制build环境下,编译后HTML中资源标签的根路径,一般以此来修改为服务器资源基础url或cdn-url

提醒

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

核心插件

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

友情链接

About

🌈 Webpack4 + Vue/React + TS (SPA or MPA) 面向实际工作流(开发 & 编译 & 打包 & 部署 & 上线)的脚手架,并提供docker镜像供快速构建。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published