bk-vision-cli

bk-webpack5-service

安装

npm install --save-dev @blueking/cli-service-webpack5

使用

// 生产环境
webpack5-cli-service build

// 开发环境
webpack5-cli-service dev

案例：

{
  "scripts": {
    "test": "node ./packages/cli/bin/index.js chart:create test-chart",
    "dev": "webpack5-cli-service dev",
    "build": "webpack5-cli-service build"
  }
}

自定义配置

项目根目录创建 bk.config.js,内如如下：

module.exports = {
    appConfig: {
        devServer : {
            host: 'dev.myapp.com',
            port: 7008,
        }
    }
}

// 或者使用函数形式，在函数内，你可以直接修改配置，或者返回一个将会被合并的对象

module.exports = {
    appConfig() {
        return {
            devServer : {
                host: 'dev.myapp.com',
                port: 7008,
            }
        }
    }
}

应用配置

module.exports = {
  appConfig: {
    outputDir: 'dist', // 构建产物目录，默认 dist
    assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的目录，默认 static
    sourceDir: './src', // 源码目录，默认 ./src
    mainPath: './src/main.js', // 应用入口，默认 ./src/main.js
    indexPath: './public/index.html', // 入口html，默认 ./index.html

    // 环境（全局）变量，可同时作用于模板html和脚本中
    env: {
      BASE_URL: JSON.stringify('/')
    },

    eslintOnSave: true, // 开启 eslint，默认关闭
    stylelintOnSave: false // 关闭 stylelint，默认关闭
  }
}

// 同样支持函数形式

module.exports = {
  appConfig (option) {
    // option.production ? true : false
    return {
      sourceDir: './src',
      mainPath: './src/main.js',
      indexPath: './public/index.html',
      env: {
        BASE_URL: option.production ? JSON.stringify('/') : JSON.stringify('/dev')
      }
    }
  }
}

更加复杂的配置案例及说明

const isModeProduction = process.env.NODE_ENV === 'production';
const indexPath = isModeProduction ? './index.html' : './index-dev.html'
module.exports = {
    appConfig() {
        return  {
            indexPath,// 指定生成的 index.html 的输出路径
            mainPath: './src/main.ts',// 页面入口（如果配置了pages，此配置将不起作用
            publicPath: 'https://dev.myapp.com/',// 部署应用包时的基本 URL。webpack.output.publicPath 一致，
            outputDir: 'dist', //生成的生产环境构建文件的目录。webpack.output.path
            assetsDir: 'static',// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目
            needSplitChunks: false, // 是否分包
            minChunkSize: 10000, // 分包大小限制
            classificatoryStatic:true,// 生成的静态资源(js、css、img、fonts)  是否放置在 assetsDir 目录下
            pages: {// 多页面配置
                main: {
                    entry: './src/main.ts',
                },
                panel: {
                    entry: './src/panel.ts',
                    filename: 'panel.html'
                },
                dashboard: {
                    entry: './src/dashboard.ts',
                    filename: 'dashboard.html'
                },
                preview: {
                    entry: './src/preview.ts'
                },
                exception: {
                    entry: './src/exception.ts'
                },
                sdk: {
                    entry: './src/sdk.tsx'
                },
            },
            css: { // 向 CSS 相关的 loader 传递选项
                loaderOptions: {
                    scss: {
                        additionalData: '@import "./src/style/variables.scss";',
                    },
                },
            },
            devServer : { // webpack-dev-server
                host: 'dev.myapp.com',
                port: 7008,
                proxy: {
                    '/api/': {
                        target: 'http://demo.myapp.com',
                        ws: false,
                        changeOrigin: true,
                    },
                }
            }
        }
    },
};

修改 webpack 配置

module.exports = {
  configureWebpack: {
    devServer: {
      host: 'dev.myapp.com',
      port: 7788
    }
  }
}

// 或者使用函数形式

module.exports = {
  configureWebpack (config, option) {
    // option.production ? true : false
    return {
      devServer: {
        host: 'dev.myapp.com',
        port: 7788
      }
    }
  }
}

完整配置示例

const { resolve } = require('path')
const webpack = require('webpack')
const CopyPlugin = require('copy-webpack-plugin')
const ReplaceStaticUrlPlugin = require('./lib/client/build/replace-static-url-plugin')

const config = require('./lib/client/build/conf')

module.exports = {
  appConfig(option) {
    return {
      sourceDir: './lib/client/src',
      outputDir: resolve(__dirname, './lib/client/dist'),
      mainPath: './lib/client/src/main.js',
      indexPath: option.production ? './lib/client/index.html' : './lib/client/index-dev.html',
      env: option.production ? config.build.env : config.dev.env,
      devServer: {
        host: config.dev.host,
        port: config.build.port,
        proxy: {
            [APIPrefix]: `http://${config.dev.host}:${config.build.port - 1}`,
        }
      },
    };
  },

  configureWebpack(webpackConfig, option) {
    const APIPrefix = JSON.parse(config.dev.env.AJAX_URL_PREFIX) || '/api'
    return {
      output: {
        publicPath: option.production ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
      },
      resolve: {
        alias: {
          vue$: 'vue/dist/vue.esm',
        },
      },
      node: {
        global: true,
      },
      plugins: [
        new webpack.DefinePlugin(option.production ? config.build.env : config.dev.env),
        new CopyPlugin({
          patterns: [
            {
              from: resolve(__dirname, './lib/client/static'),
              to: config.build.assetsSubDirectory,
              globOptions: { dot: true, ignore: ['.*'] },
            },
          ],
          options: {
            concurrency: 300,
          },
        }),
        new ReplaceStaticUrlPlugin({ fileNamePrefix: 'main' })
      ]
    }
  }
}

Webpack 5 CLI 参数说明

@blueking/cli-service-webpack5 3.x已经适配

{
  "webpack": "^5.72.1",
  "webpack-cli": "^4.9.2",
  "webpack-dev-server": "^4.9.0"
}

生态，相关的插件参数请注意更新

appConfig 参数

参数	说明	类型	默认值
outputDir	当运行webpack5-cli-service build 时生成的生产环境构建文件的目录。	String	./dist
sourceDir	alias: {'@': sourceDir },	String	./src
mainPath	页面入口（如果配置了pages，此配置将不起作用)	String	'./src/main.js'
indexPath	指定生成的 index.html 模板路径，如果 pages 配置了filename属性，将以filename为准	String	index.html
assetsDir	放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir的) 目录。	String	static
eslintOnSave	是否启用eslint-webpack-plugin	Boolean	false
stylelintOnSave	是否启用 stylelint-webpack-plugin	Boolean	false
css	向 CSS 相关的 loader 传递选项 ，具体查看 ### css参数说明	Object	null
needSplitChunks	是否启用默认的配置分包策略webpack.optimization.splitChunks	Boolean	true
needHashName	文件名是否hash	Boolean	true
pages	多页面入口,具体查看 pages参数说明	Object	null
devServer	webpack.devServer 配置项，具体查看devServer参数说明	Object	————
minChunkSize	webpack.optimize.MinChunkSizePlugin minChunkSize配置项	Number	10000
classificatoryStatic	生成的静态资源(js、css、img、fonts) 是否放置在 assetsDir 目录下	Boolean	true
target	webpack.output.libraryTarget 配置属性	String
library	webpack.output.libraryTarget 配置属性	String	web

css参数说明

向 CSS 相关的 loader 传递选项，如想sass 公共变量设置

module.exports = {
    appConfig:{
        // ****
        css: {
            loaderOptions: {
                scss: {
                    additionalData: '@import "./src/style/variables.scss";',
                },
            },
        }
    }
}

pages参数说明

在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

参数	说明	类型
entry	page 的入口	String
template	模板来源	String
filename	在 的输出html文件名称，如dist/index.html	String
chunks	chunks 内如，默认 ['chunk-bk-magic', 'vendors', ${key}]	Array

const isModeProduction = process.env.NODE_ENV === 'production';
const indexPath = isModeProduction ? './index.html' : './index-dev.html'
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  }
}

devServer参数说明

同 https://webpack.docschina.org/configuration/dev-server/

注意： { "webpack-dev-server": "^4.9.0"},注意webpack-dev-server3 与4 的区别，具体参看：

https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

devServer 默认参数

import { Configuration  } from 'webpack-dev-server';
import path from 'path';
export default (): Configuration => ({
    host: '127.0.0.1',
    port: 7000,
    hot: true,
    https: false,
    static: path.join(__dirname, 'static'),
    open: true,
    allowedHosts: 'all',
    client: {
        progress: true,
        overlay: { // 只显示错误信息
            errors: true,
            warnings: false,
        },
        logging: 'warn', // 控制台只显示warn以上信息
    },
});