從零搭建webpack4+react+typescript+eslint腳手架(二)

完善webpack打包配置

有了webpack的基礎配置，還不足以支持打生產環境能夠使用的包，我們還需要增加一些配置。

首先，每次打包前最好能把上一次生成的文件刪除，這裏可以用clean-webpack-plugin插件實現：

$ npm i -D clean-webpack-plugin

然後修改webpack基礎配置：

// webpack.base.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

在生產環境，我們希望部署新版本後能夠丟棄緩存，又希望保留沒有被改動的文件的緩存，而在開發環境，我們希望完全不使用緩存，因此我們需要在當前配置的基礎上，分別擴展生產和開發兩套配置。

// webpack.prod.js 生產環境打包配置
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge.smart(baseWebpackConfig, {
  mode: 'production',
  devtool: sourceMapsMode,
  output: {
    filename: 'js/[name].[contenthash:8].js', // contenthash：只有模塊的內容改變，纔會改變hash值
  },
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

// webpack.dev.js 開發環境的配置
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base');
const config = require('./config');

module.exports = merge.smart(baseWebpackConfig, {
  mode: 'development',
  output: {
    filename: 'js/[name].[hash:8].js',
    publicPath: config.publicPath // 這裏可以省略
  },
  module: {
    rules: [
      {
        oneOf: []
      }
    ]
  },
}

接下來我們編輯build.js，讓打包程序真正能夠運行起來：

// config/build.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.prod');

webpack(webpackConfig, function (err, stats) {});

安裝工具並添加啓動命令：

$ npm i -D cross-env

// package.json
{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production node config/build.js"
  }
}

然後運行打包命令，就能看到新生成的dist目錄中有已經打包好的文件了：

$ npm run build

打包分析工具

包是打出來了，但是打包好的文件構成是什麼樣呢，有沒有按照我們的需要正確打包呢，我們需要一個分析工具來幫助判斷，這就是webpack-bundle-analyzer。

$ npm i -D webpack-bundle-analyzer

我們希望根據打包的命令參數，在打包時自動生成或不生成分析報告。

// webpack.base.js
const argv = require('yargs').argv;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const merge = require('webpack-merge');

const bundleAnalyzerReport = argv.report; // 根據命令參數是否含有 'report' 來決定是否生成報告
// 這個配置將合併到最後的配置中
const webpackConfig = {
  plugins: []
};
if (bundleAnalyzerReport) {
  webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    openAnalyzer: false,
    reportFilename: path.join(config.assetsRoot, './report.html')
  }));
}
// 改用merge來合併配置
module.exports = merge(webpackConfig, {
  // ...configs
});

在package.json打包命令中增加參數：

"scripts": {
  "build": "cross-env NODE_ENV=production node config/build.js --report"
},

運行npm run build，生成的dist目錄中會有一個report.html文件，就是我們的分析報告。

支持less和css modules

現在我們使腳手架支持css，less和css modules：

先裝工具：

$ npm i -D style-loader css-loader less less-loader

增加配置：

// webpack.base.js
module: {
  rules: [
    {
      oneOf: [
        // ... configs
        {
          test: /\.(less|css)$/,
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                modules: false // 如果要啓用css modules，改爲true即可
              }
            },
            {
              loader: 'less-loader',
              options: { javascriptEnabled: true }
            }
          ]
        },
      ]
    }
  ]
}

提取css

我們發現打包好的文件中並沒有css，但是css卻可以正常工作，這是因爲webpack並沒有把樣式從js中剝離出來。

爲了方便管理靜態資源，充分利用緩存，我們需要將css單獨打包。

先安裝工具：

$ npm i -D optimize-css-assets-webpack-plugin

增加打包配置：

// webpack.prod.js
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// ...webpack configs
optimization: {
  minimizer: [
    new OptimizeCSSAssetsPlugin({
      cssProcessorOptions: true ? { map: { inline: false }} : {}
    })
  ]
}

運行打包命令，就能看到生成的css文件。

自動增加css前綴

使用postcss，可以自動爲css增加瀏覽器前綴。

安裝依賴：

$ npm i -D postcss-loader autoprefixer

增加webpack配置：

// webpack.base.js，webpack.prod.js
{
  test: /\.(less|css)$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        modules: false
      }
    },
    'postcss-loader', // 注意插入的位置，webpack.prod.js也要加這一項！！！
    {
      loader: 'less-loader',
      options: { javascriptEnabled: true }
    }
  ]
},

在根目錄新建postcss.config.js：

module.exports = {
  plugins: {
    autoprefixer: {}
  }
};

在package.json中增加配置：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8",
  "iOS >= 8",
  "Firefox >= 20",
  "Android > 4.4"
]

postcss-px-to-viewport示例

這裏提供一個利用postcss做基於vh，vw佈局的配置例子。

安裝依賴：

$ npm i -D postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg
$ npm i -D cssnano cssnano-preset-advanced

修改postcss.config.js：

module.exports = {
  plugins: {
    'postcss-aspect-ratio-mini': {}, // 處理元素容器的寬高比
    'postcss-write-svg': { //處理1px邊框
      utf8: false
    },
    'postcss-px-to-viewport': {
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    cssnano: {
      'cssnano-preset-advanced': {
        zindex: false, // 這裏一定要關掉，否則所有的z-index會被設爲1
      }
    },
    autoprefixer: {}
  }
};

配置完成後，如果是基於750px寬度設計圖，那麼設計圖上1px就直接在樣式中寫1px即可，打包時會自動轉爲vw單位。