webpack@next webpack-multi-page-cli 多页脚手架2.0

最新推荐文章于 2024-05-30 17:08:04 发布

牙疼格尔

最新推荐文章于 2024-05-30 17:08:04 发布

阅读量200

点赞数

文章标签： nodejs js es6

本文链接：https://blog.csdn.net/t7071t/article/details/106414757

版权

根据自己的经验和想法，对原有的1.x版本进行的大版本的升级。在实际工作中，能结合的应用场景会更加多元化。

github：https://github.com/pomelott/webpack-multi-page-cli

如对您有帮助，请给星已鼓励，如有问题请issue。本多页面向实际工作流，会持续更新。

webpackMultiPageCli based on webpack@latest. This cli can provide:

More flexible directory structure
More comprehensive build functions
Much Higher scalability
More active and frequent maintenance

Fast Use

download the dependences

    npm install

running with development mode

    npm run dev

running with production mode

    npm run build

running with analyzer

    npm run analyze

Use in your work && customize HTML

cli will create the entry automatically accoriding to you pageDir, in this cli, one page crrespond to one pageDir, and you can custom your page by two methods as follows:

use param.js and entry.js

if there is a param.js, cli will resolve this with the default html template written in pug engine, and entry.js is the crrespond entrance file of assets that will be inlined in the resolved html.

the config of param.js as follows:

Name	Type	Default	Description
title	String	'multi-page-cli'	the text of title-tag in html
tag	Object	{meta: [],eadLink: [],headScript: [],bodyLink: [],bodyScript: []}	cotrol the assets tags
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	{}	control the root instance of Vue
vueInit.el	String	undefined	el attribute of vue instance, such as '#app'
vueInit.entrance	String	undefined	control the entrance vue component

    // for detai code, you can view vueDemo in dev mode
    module.exports = {
        title: 'Example in Multi-Page',
        tag: {
            meta: [{
                name: 'webpack-multi-page-cli',
                content: 'vueDemo'
            }, {
                name: "webpack-multi-page-cli",
                content: 'https://github.com/pomelott/webpack4.x_Demo'
            }],
            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 Multi-Page</title>
        <meta name="webpack-multi-page-cli" content="vueDemo" />
        <meta name="webpack-multi-page-cli" content="https://github.com/pomelott/webpack4.x_Demo" />
        <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>

更详细的文档详见github ： https://github.com/pomelott/webpack-multi-page-cli

牙疼格尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack@next webpack-multi-page-cli 多页脚手架2.0

根据自己的经验和想法，对原有的1.x版本进行的大版本的升级。在实际工作中，能结合的应用场景会更加多元化。github：https://github.com/pomelott/webpack-multi-page-cli如对您有帮助，请给星已鼓励，如有问题请issue。本多页面向实际工作流，会持续更新。webpackMultiPageCli based on webpack@latest. This cli can provide:More flexible directory struct
复制链接

扫一扫