webpack使用筆記

1.devtool:inlne-source-map的做用

在開發者模板試調試，看到的代碼就是源碼，若是不設置該屬性，則看到的代碼是編譯後的代碼。以下圖一圖二
配置前：

配置後：

2.css模塊化
只須要在use css-loader後面指定modules便可，
像這樣：

{
            test: /((\.less)|(\.css))$/,
            use: [{
               loader:'style-loader'
            },{
               loader:'css-loader',
               options:{
                  modules:true
               }
            }]
         }

固然也能夠

{
            test: /((\.less)|(\.css))$/,
            use: [ 'style-loader','css-loader?modules
         }

模塊化 生成的類型默認爲[hash:base64] 想要自定義的話須要使用localIdentName配置
webpack官方文檔中提供的模塊化配置項已通過時（當前時間爲2020.01.02），
它是這樣配置的：（運行錯誤，提示 'options has an unknown property 'localIdentName'.）

use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]'
      }
    }
  ]

如今正確配置應該爲：

use: [
               {
                  loader: 'style-loader'
               }, {
                  loader: 'css-loader',
                  options: {
                     modules: {
                        localIdentName: '[name][path]__[local]--[hash:base64:5]'
                     }
                  }
               }]