Webpack的踩坑與彙總

smallturbo發表於2018-08-31
Web

個人認為Webpack對待新手不友好的地方主要是配置檔案過於複雜，主要有以下難點

  • loader的配置，不同的檔案應該配置哪些loader
  • plugins的對應的用法，常用的plugins介紹
  • webpack的模組熱更新（module hot replace）的配置。
  • 如何引入第三方庫（百度地圖等）
  • 優化打包結果

相應檔案對應的loader

  • css檔案一般會使用css-loader、style-loader這兩種loader，postcss-loader在調整css的相容性的時候也會用到；
    • css-loader用於在JS中載入Css；
    • style-loader用於將轉換好的Css插入到<style></style>中；

    • postcss-loader用於新增Css的字首、巢狀、函式、變數，列如-webkit-flex，但是postcss-loader需要額外配置；
      配置如下：

      # cssnext可以讓你寫CSS4的語言，並能配合autoprefixer進行瀏覽器相容的不全，而且還支援巢狀語法
$ npm install postcss-cssnext --save-dev

# 瀏覽器相容補全
$ npm install autoprefixer --save-dev

# 類似scss的語法，實際上如果只是想用巢狀的話有cssnext就夠了
$ npm install precss --save-dev

# 在@import css檔案的時候讓webpack監聽並編譯
$ npm install postcss-import --save-dev
      // 配置webpack.config.js
const postcssImport = require(`postcss-import`);
const cssnext = require(`postcss-cssnext`);

module: {
  loaders: [
    {
      test: /.css$/,
      // 如果使用了 ExtractTextPlugin
      loader: ExtractTextPlugin.extract(`style`, `css!postcss`)
      // 否則
      // loader: "style-loader!css-loader!postcss-loader"
    }
  ]
},
postcss: function () {
  return [
    postcssImport({ addDependencyTo: webpack }),
        cssnext({autoprefixer: {browsers: "ie >= 10, ..."}})
    ];
}

相關文章