webpack工程化最佳实践小结

使用 NPM Script 来管理开发命令

  1. npm start -> npm run start
  2. 在 package.json 中使用 cross-env 来区分环境

webpack 区分多环境配置

  1. 通用配置 webpack.config.base.js;
  2. 开发环境配置 webpack.config.dev.js;
  3. 生产环境配置 webpack.config.prod.js;

通用配置主要配置 entry、loader、plugin等,根据 cross-env 传入的 NODE_ENV 环境来进行相关配置 例如:NODE_ENV=production 时使用 mini-css-extract-plugin 的loader

开发环境主要配置 devServer、API、mock等

生产环境主要配置 打包上线,包括 splitChunks、压缩资源、CDN、路径配置等,还可以在 terser-webpack-plugin 配置中强制去除一些容易忘记的调试信息:例如 debugger、alert

todo

最近有点慌,水一下拿个徽章

你可能感兴趣的:(前端)