webpack 4 配置遇到的坑

奮鬥路上的小菜雞發表於2018-05-18
Web

webpack 版本：4.8.3

1. extract-text-webpack-plugin （CSS獨立分離）

報錯資訊：

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/chenziyun/.nvm/versions/node/v10.0.0/lib/node_modules/webpack/lib/Chunk.js:712:9)
    at /Users/chenziyun/Desktop/spa/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/chenziyun/Desktop/spa/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/chenziyun/.nvm/versions/node/v10.0.0/lib/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/chenziyun/.nvm/versions/node/v10.0.0/lib/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/Users/chenziyun/.nvm/versions/node/v10.0.0/lib/node_modules/webpack/lib/Compilation.js:890:27)
    at hooks.make.callAsync.err (/Users/chenziyun/.nvm/versions/node/v10.0.0/lib/node_modules/webpack/lib/Compiler.js:481:17)
    at _err0 (eval at create (/Users/chenziyun/.nvm/versions/node/v10.0.0/lib/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (/Users/chenziyun/.nvm/versions/node/v10.0.0/lib/node_modules/webpack/lib/Compilation.js:758:12)
複製程式碼
  • 問題：extract-text-webpack-plugin報錯 // 獨立分離CSS
  • 原因：沒有webpack 4 版本的 extract-text-webpack-plugin
  • 解決辦法：npm install -D extract-text-webpack-plugin@next 替代

2. postcss-loader 自動加字首

webpack.config.js

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader' //自動加字首
         ]
    })
 },
複製程式碼

建立postcss.config.js (放在專案的根目錄下)

module.exports = {
  plugins: [
      require('autoprefixer') //自動新增字首外掛
  ]
}
複製程式碼

發現css中並沒有自動加字首，這是需要在package.json中配置

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
複製程式碼

引數：

  1. last 2 versions: // 每個瀏覽器中最新的兩個版本。
  2. 1% // 全球瀏覽器使用率大於1%。
  3. IE9以上
  4. 其他引數請參考 https://github.com/browserslist/browserslist

3. purifycss-webpack （消除未使用的CSS）

  • webpack 4中 使用purifycss-webpack
  • 可以查詢：purifycss-webpac
  • npm install purifycss-webpack purify-css --save-dev
  • webpack.config.js 配置 引入模組：
const glob = require('glob'); 
const PurifyCSSPlugin = require("purifycss-webpack");
複製程式碼

plugin配置：

new PurifyCSSPlugin({ 
    paths: glob.sync(path.join(__dirname, 'src/*.html'))
})
複製程式碼
  • 問題：沒有任何報錯，但是打包時，丟失，部分CSS並沒有合併進來，背景圖片也是沒有被打包。
  • 原因：分離CSS外掛在去除未使用CSS外掛之前，或者是檔案路徑問題。
  • 解決辦法：
  1. new ExtractTextPlugin 放在new PurifyCSSPlugin之前。
  2. 檢查下'../src/*.html'路徑是否有問題。。

這裡我是因為webpack.config.js在config目錄下，並非預設在專案根目錄下，所以這裡的__dirname 在config 具體如下：

    paths: glob.sync(path.join(__dirname, '../src/*.html'))
複製程式碼
    new ExtractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({ 
      paths: glob.sync(path.join(__dirname, '../src/*.html')),
    }),
複製程式碼

4.對於babel-polyfill 和 transform-runtime

目的：可以使用新的內建物件比如 Promise 或者 WeakMap, 靜態方法比如 Array.from 或者 Object.assign, 例項方法比如 Array.prototype.includes 和生成器函式（提供給你使用 regenerator 外掛）。

第一種方式 全域性引入,完全交由babel-polyfill外掛處理轉義：

npm install --save babel-polyfill
複製程式碼

main.js

import "babel-polyfill";
require("babel-polyfill")
複製程式碼

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};
複製程式碼

優點

  • 作用域是模組,避免全域性衝突
  • 是按需引入,避免不必要引入造成及程式碼臃腫 缺點
  • 每個模組內單獨引用和定義polyfill函式,造成了重複定義,使程式碼產生冗餘

第二種方式，區域性引入在使用第三方庫時候，比如ElementUI,iview。建議使用這種方式。

npm install --save-dev babel-plugin-tranform-runtime babel-runtime
複製程式碼

.babelrc檔案中配置外掛:

"plugins": ["transform-runtime"]
複製程式碼
  • 優點
    • 無全域性汙染
    • 依賴統一按需引入(polyfill是各個模組共享的), 無重複引入, 無多餘引入
    • 適合用來編寫lib(第三方庫)型別的程式碼
  • 缺點
    • 被polyfill的物件是臨時構造並被import/require的,並不是真正掛載到全域性由於不是全域性生效,對於例項化物件的方法,如[].includes(x),依賴於Array.prototype.includes仍無法使用

5.package.json中scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config=build/webpack.dev.config.js --inline --open --hot",
    "build": "cross-env NODE_ENV=prod webpack --config=build/webpack.prod.config.js"
  },
複製程式碼
npm install cross-env --save-dev
複製程式碼

設定變數時，不要使用&&否則，會被認為執行兩條命令，這時重新開始webpack沒有cross-env的webpack，通過process.env.NODE_ENV拿到了undefined

相關文章