网站服务部小组文档

Webpub2项目Demo注意须知

目前新版主要基于Webpack5与Vite做构建工具，废弃Fis3与Webpack4

Webpub2-Demo

重要说明

  • NodeJs版本必须安装v16.0以上版本
  • 每次使用，需使用最新的Demo的配置和结构

Webpack

1、webpack打包后默认模块导出，使用的是箭头函数

如需要兼容低版本浏览器，去掉箭头函数，可修改webpack.base.js配置，添加以下配置

    let config = {
        target : ['es5','web']
    };

2、引用第三方js文件(非标准的module)，例如：Zepto等

需要先在html页面引入对应的js文件，修改webpack.base.js配置externals

    <!--引用本地项目的-->
    <script src="js/zepto.js"></script>
    <!--引用线上-->
    <script src="https://nie.res.netease.com/comm/js/zepto(mixNIE).last.js"></script>

    let config = {
        externals: {
            '$': 'window.Zepto'
        }
    };

3、需要不带hash值的复制资源文件(不包括js、css)，而且需要代码中有明显的引用(非拼接地址形式)

只方式只针对非js、css资源，以及资源在html或者js中有引用，js中是需要使用require或者import引用，修改webpack.base.js

    let config = {
        module : {
            rules : [
                {
                    test: /data/,
                    type: "asset/resource",
                    generator: {
                        filename: "data/[name][ext]"
                    }
                }
            ]
        }
    };

4、仅需要复制资源文件，代码中使用拼接地址引用

比如需要循环拼接引人图片列表，此时需要使用CopyPlugin插件，修改webpack.base.js

    let img = __CDNPATH + 'data/1.jpg';

    //webpack.base.js
    const CopyPlugin = require("copy-webpack-plugin");

    let config = {
        plugins : [
            new CopyPlugin({
                patterns: [
                    {
                        from: "src/data",
                        to: "data"
                    }
                ]
            }),
        ]
    };

5、需要单独导出css文件使用

使用URS登录组件，需要加载独立css文件，已在simple-webpack5中的配置实现，如不需要，可以删除start.js，dist.js、release.js中的CopyPlugin配置相关即可

6、特殊后缀文件，需要根据实际情况添加

默认配置中，对于特殊后缀文件，是不支持，需要额外添加才能够打包出来，修改webpack.base.js

    let config = {
        module : {
            rules : [
                {
                    test: /\.(glb|h5f)$/,
                    type: "asset/resource",
                    generator: {
                        filename: "assets/[name][ext]"
                    }
                }
            ]
        }
    };

7、需要添加额外的环境变量

例如，需要添加是否本地环境，则需要在同时修改start、dist、release配置文件

    // 在start.js中为true，其它为false
    plugins : [
        new webpack.DefinePlugin({
            __DEBUG: JSON.stringify(true),
            __CDNPATH: JSON.stringify("http://127.0.0.1:9000/"),
            __LOCAL : JSON.stringify(true)
        })
    ]

Webpack-Cms

1、旧产品依赖GBK编码

simple-webpack-cms中已经实现，在webpack.dist与webpack.release，默认注释掉，使用EncodingPlugin，注意：源文件必须使用UTF-8编码

    const EncodingPlugin = require('webpack-encoding-plugin');

    let config = {
        plugins : [
            new EncodingPlugin({
                test: /(\.js|\.css|\.html)($|\?)/i,
                encoding: 'GBK'
            })
        ]
    };

Eslint

提示xxxxx全局变量不存在

修改.eslintrc.js配置文件，添加xxxxx变量校验

    module.exports = {
        globals: {
            "nie": true,
            "xxxxx" : true
        }
    };

Vite

1、需要复制资源文件且不带hash值，代码也没有引用

将资源放在根目录的public/data下即可，打包时候会复制到根目录下的data目录下

2、支持随机路径

随机路径涉及分享参数与随机地址，只支持index.html访问，以及不带哈希

去掉vue-router，项目内只有一个页面地址和路径

3、支持随机路径的情况下，还需要额外支持PC的扫码页

H5还需要支持PC打开后显示二维码扫码页面qrcode.html

  • 需要先按照支持随机路径方式执行
  • 在项目根目录下新建qrcode/index.html，qrcode目录跟src同级
  • 修改vite.config.base.ts配置，添加以下配置
    build: {
        minify: false,
        rollupOptions: {
            input: {
                index: resolve(__dirname, '../index.html'),
                qrcode: resolve(__dirname, '../qrcode/index.html')
            }
        }
    }