webpack4構建react腳手架

時間 2019-11-21

標籤 webpack4 webpack 構建 react 腳手架欄目 React 简体版

原文原文鏈接

create-react-app 腳手架尚未更新到webpack4，可是猛然間發現webpack4已經到 v4.12.0 版本了！！！慌得不行，正好端午有空因此研究了一波，本身搭建了一個簡單的react腳手架。實現本地代理,cssModule,css預處理,postCss,文件壓縮等經常使用的功能css

過程

進入項目
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生產配置
而後編寫配置，這裏我就直接放源碼了
源碼node

webpack4新特性

mode

webpack4新出了一個mode模式，有三種選擇，none,development,production.最直觀的感覺就是你能夠少些不少配置，由於一旦你開啓了mode模式，webpack4就會給你設置不少基本的東西react
若是你只是想簡單的進行打包,在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代替webpack

官方稱這種默認配置是保持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"
    }
  }
}