webpack使用记录

当webpack.DefinePlugin遭遇'xxx' is not defined no-undef

// webpack.config.js
{
    plugins: [
      new webpack.DefinePlugin({
        'VERSION': JSON.stringify('1.0.0')
      })
    ]
}

// app.js

console.log('VERSION', VERSION)
// 'VERSION' is not defined  no-undef

当出现该eslint错误，那说明你需要配置eslint的lobals属性。

因为通过webpack.DefinePlugin配置进去的值是一个全局变量，默认情况下eslint会阻止全局变量的使用，除非你明确的通过配置告诉他你知道你在干什么。

在项目对eslint做如下配置：

// eslintrc.js

module.exports = {
  globals: {
    VERSION: true
  }
}

basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")

当执行如下命令报标题所示的错误，是因为windows无法执行shell命令导致。

{
    "debugger": "node ./node_modules/.bin/webpack --config webpack.config.js"
}

我们跳过shell命令，直接执行目标文件即可。

{
    "debugger": "node ./node_modules/webpack/bin/webpack --config webpack.config.js"
}

资料：
http://www.jerrychane.com/technique-sharing/2859.html

oneOf是干什么的？

避免无意义的rule匹配。

rules: [
  {
    test: /\.less$/,
    loader: 'less-loader'
  },
  {
    test: /\.scss$/,
    loader: 'scss-loader'
  },
]

上面是一个常规的rules配置，当我有一个style.less文件，会执行如下流程：
1 尝试与.less进行匹配
2 尝试与.scss进行匹配

观察上面执行流程，我们会发现第2条其实是没有意义的，因为他根本不会匹配上，那么，有什么办法优化掉第2条的执行呢？
答案就是oneOf。

rules: [
  {
    oneOf: [
      {
        test: /\.less$/,
        loader: 'less-loader'
      },
      {
        test: /\.scss$/,
        loader: 'scss-loader'
      },
    ]
  }
]

上面是使用了oneOf的rules配置，当我有一个style.less文件，会执行如下流程：
1 尝试与.less进行匹配（结束，下面那条不会被执行了）
2 尝试与.scss进行匹配