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]'
                     }
                  }
               }]