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

webpack4構建react腳手架