解決:Webpack4 打包時css樣式檔案為空

洲上牧童發表於2020-11-26

起因

npm upgrade

因為每次都提示有包更新,所以更新了包。然後就出現

static/css/1.1dfe7c7.css    0 KiB       1  [emitted]   vendors~app 

調查

於是我看了一下,CSS打包是用的 "extract-text-webpack-plugin": "^4.0.0-beta.0" , 好像當時也是因為有問題才切這個Beta版本的,
去Npmjs上查了一下,果然:

Npmjs包資訊
人家這個包已經不支援了,所以更新了會出問題。於是按照推薦更換新的包:"mini-css-extract-plugin": "^1.3.1",

程式碼如下:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
rules: [
    {
       test: /\.(c|le)ss$/,
       use: [
          MiniCssExtractPlugin.loader,
         'css-loader',
         'less-loader',
       ],
     },
]

結語

建議大家生產環境不要把 ^ 符號放開,這樣它就不會去升級了,固定版本號。

相關文章