构建基础支持

• webpack 4.x
• babel 7.x
• vue
• typescript

babel7 新特性支持

• @babel/plugin-proposal-optional-chaining
• @babel/plugin-proposal-decorators
• @babel/plugin-proposal-class-properties

babel7 参考.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "transform-vue-jsx",
    "@babel/plugin-transform-typescript",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-transform-runtime", { "corejs": 2 }]
  ],
}

安装项目额外依赖项

devDependencies：

"babel-eslint": "^10.0.2",
"eslint": "^6.1.0",
"eslint-config-za": "^2.0.0",
"eslint-plugin-vue": "^5.2.3",

基础package.json配置

{
  "scripts": {
    "build": "node node_modules/za-webpack-openplatform/build/build.js",
    "build:dll": "node node_modules/za-webpack-openplatform/build/build.dll.js"
  },
  "projectBuildConfig": {}
}

Alias Webpack默认别名目录

• @：src
• src：src
• assets: src/assets
• config: src/config
• pages: src/pages
• components: src/components

多环境编译配置

• PROJECT_CONFIG: 设置读取的projectBuildConfig配置文件源

{
  "scripts": {
    "build:test": "cross-env PROJECT_CONFIG=project.config.test.js node node_modules/za-webpack-openplatform/build/build.js",
    "build:pre": "cross-env PROJECT_CONFIG=project.config.pre.js node node_modules/za-webpack-openplatform/build/build.js",
    "build:prd": "cross-env PROJECT_CONFIG=project.config.prd.js node node_modules/za-webpack-openplatform/build/build.js"
  }
}

Entry Bundle依赖报告分析

• BUILD_REPORT: 是否生成Entry文件依赖分析报告，默认false

{
  "scripts": {
    "build:report": "cross-env BUILD_REPORT=true node node_modules/za-webpack-openplatform/build/build.js",
  }
}

postCss启用配置

.posstcssrc.js参考：

plugins: {
    'autoprefixer': {
      browsers: [
        "> 1%",
        "last 2 versions",
        "not ie <= 8",
        "iOS >= 8",
        "Android >= 4"
      ]
    },
    "postcss-pxtorem": {
      rootValue: 14,
      propList: ['*', '!border*'],
    }
  },
};

配置项projectBuildConfig

• entryPath：配置入口文件：例如src/entry/*.js

• assetsSubDirectory：静态资源的访问目录前缀：例如promotion,默认/

• assetsPublicPath：静态资源的访问公共路径：例如/static,默认/

• commonPath：webpack DLL构建公共入口文件，例如：src/common/*.js

• assetsCommonPublicPath：webpack DLL构建公共入口文件访问路径，例如：public/promotion,默认取public/ + package.json的name属性

• useHtmlWebpackPlugin：webpack SPA HtmlWebpackPlugin配置是否开启，默认false

• htmlPath：开启useHtmlWebpackPlugin时，自定义设置多个入口HTML Template文件源配置项，例如src/html/*.html，chunksName需和entryName保持一致，不配置则默认index.html路径读取项目根目录

• proxyTable：webpack http proxy 跨域代理访问配置

• useSentryWebpackPlugin: sentry前端监控集成插件，默认false

• useSourceMap: 是否启用sourcemap，如果配置sentry监控，可以设置为 true

• version：静态资源的发布版本号，默认取package.json的version属性, 默认为1.0.0

• devPort：开发模式端口号，默认8080

升级常见问题

babel，eslint等插件版本报错：

• 清除原项目node_modules依赖文件夹后，重新npm install

老项目文件缺失问题：

• 检查项目目录下是否存在.postcssrc.js, .sentryclirc, .stylelintrc.js, .eslintrc.js, .babelrc文件

Express静态资源路径匹配问题，按如下设置：

  app.use(express.static(path.resolve(__dirname, '../dist/')));
  app.use(express.static(path.resolve(__dirname, '../public/')));

本地热部署报错,注释掉相关代码就可：

  Error: Plugin could not be registered at 'html-webpack-plugin-after-emit'. Hook was not found.
  ...

  // compiler.plugin('compilation', (compilation) => {
  //   compilation.plugin('html-webpack-plugin-after-emit', (cb) => {
  //     hotMiddleware.publish({
  //       action: 'reload',
  //     });
  //     cb();
  //   });
  // });

boom3 sentry/cli install错误:

  npm ERR! errno 1
  npm ERR! @sentry/[email protected] install: `node scripts/install.js`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the @sentry/[email protected] install script.

编译报错：UnhandledPromiseRejectionWarning: TypeError: decl.moveTo is not a function:

• 检查css样式是否存在同名样式重复代码