za-webpack-openplatform
npm install za-webpack-openplatformjs
{
"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：
`js
"babel-eslint": "^10.0.2",
"eslint": "^6.1.0",
"eslint-config-za": "^2.0.0",
"eslint-plugin-vue": "^5.2.3",
`
基础package.json配置
` js
{
"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配置文件源
`js
{
"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
`js
{
"scripts": {
"build:report": "cross-env BUILD_REPORT=true node node_modules/za-webpack-openplatform/build/build.js",
}
}
`
postCss启用配置
.posstcssrc.js参考：
`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静态资源路径匹配问题，按如下设置：
`js
app.use(express.static(path.resolve(__dirname, '../dist/')));
app.use(express.static(path.resolve(__dirname, '../public/')));
`
> 本地热部署报错,注释掉相关代码就可：
`bash
Error: Plugin could not be registered at 'html-webpack-plugin-after-emit'. Hook was not found.
...
`
`js
// compiler.plugin('compilation', (compilation) => {
// compilation.plugin('html-webpack-plugin-after-emit', (cb) => {
// hotMiddleware.publish({
// action: 'reload',
// });
// cb();
// });
// });
`
> boom3 sentry/cli install错误:
`bash
npm ERR! errno 1
npm ERR! @sentry/cli@1.47.1 install: node scripts/install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @sentry/cli@1.47.1 install script.
`
> 编译报错：UnhandledPromiseRejectionWarning: TypeError: decl.moveTo is not a function`: