webpack4构建react脚手架

create-react-app 脚手架尚未更新到webpack4，可是猛然间发现webpack4已经到 v4.12.0 版本了！！！慌得不行，正好端午有空因此研究了一波，本身搭建了一个简单的react脚手架。实现本地代理,cssModule,css预处理,postCss,文件压缩等经常使用的功能

过程

• 进入项目
• npm init生成package.json
• npm i webpack webpack-cli webpack-dev-server --save-dev
  • 这3个包是webpack4的基础功能
  • webpack 在 webpack 4 里将命令行相关的都迁移至 webpack-cli 包
  • webpack-dev-server为实时监控文件变化包
• 而后创建3个文件
  • webpack.config.base.js基本配置
  • webpack.config.dev.js开发配置
  • webpack.config.prod.js生产配置
• 而后编写配置，这里我就直接放源码了

• 源码

  webpack4新特性

  mode

  webpack4新出了一个mode模式，有三种选择，none,development,production.最直观的感觉就是你能够少些不少配置，由于一旦你开启了mode模式，webpack4就会给你设置不少基本的东西

• 若是你只是想简单的进行打包,在package.json中添加以下两个script就能够了

{
    "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
    },
}

• development模式下，将侧重于功能调试和优化开发体验，包含以下内容：
  • 浏览器调试工具
  • 开发阶段的详细错误日志和提示
  • 快速和优化的增量构建机制
  • 默认配置以下：

  module.exports = {
    //开发环境下默认启用cache，在内存中对已经构建的部分进行缓存
    //避免其余模块修改，可是该模块未修改时候，从新构建，可以更快的进行增量构建
    //属于空间换时间的作法
    cache: true, 
    output: {
      pathinfo: true //输入代码添加额外的路径注释，提升代码可读性
    },
    devtools: "eval", //sourceMap为eval类型
    plugins: [
      //默认添加NODE_ENV为development
      new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
    ],
    optimization: {
      namedModules: true, //取代插件中的 new webpack.NamedModulesPlugin()
      namedChunks: true
    }
  }

• production模式下，将侧重于模块体积优化和线上部署，包含以下内容：
  • 开启全部的优化代码
  • 更小的bundle大小
  • 去除掉只在开发阶段运行的代码
  • Scope hoisting和Tree-shaking
  • 自动启用uglifyjs对代码进行压缩
  • 默认配置以下：

  module.exports = {
    performance: {
      hints: 'warning',
      maxAssetSize: 250000, //单文件超过250k，命令行告警
      maxEntrypointSize: 250000, //首次加载文件总和超过250k，命令行告警
    }
    plugins: [
      //默认添加NODE_ENV为production
      new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
    ],
    optimization: {
      minimize: true, //取代 new UglifyJsPlugin(/* ... */)
      providedExports: true,
      usedExports: true,
      //识别package.json中的sideEffects以剔除无用的模块，用来作tree-shake
      //依赖于optimization.providedExports和optimization.usedExports
      sideEffects: true,
      //取代 new webpack.optimize.ModuleConcatenationPlugin()
      concatenateModules: true,
      //取代 new webpack.NoEmitOnErrorsPlugin()，编译错误时不打印输出资源。
      noEmitOnErrors: true
    }
  }

  webpack4的模块拆分

  webpack3咱们用commonchunk,在4里面如今废除了，并使用optimization代替

• 官方称这种默认配置是保持web性能的最佳实践

module.exports = {
  optimization: {
    minimize: env === 'production' ? true : false, //是否进行代码压缩
    splitChunks: {
      chunks: "async",
      minSize: 30000, //模块大于30k会被抽离到公共模块
      minChunks: 1, //模块出现1次就会被抽离到公共模块
      maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
      maxInitialRequests: 3, //入口模块最多只能加载3个
      name: true,
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20
          reuseExistingChunk: true,
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    },
    runtimeChunk {
      name: "runtime"
    }
  }
}

• 如今咱们只须要在optimization中配置runtimeChunk和splitChunks便可 ，具体配置见：splitChunks

  打包速度

  就一个字，快！！！速度提升了50%以上

• webpack3
  

• webpack4
  

小结

• 如今还只是接触了4，还有不少很深刻的用法没尝试,之后再慢慢折腾
• 项目地址

最后

你们好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是本身第一次作博客，但愿和你们多多交流，一块儿成长！文章将会在下列地址同步更新……
我的博客：www.yangyuetao.cn
小程序：TaoLand