Webpack 系列之 Webpack + xxx 配合使用

Question

渣渣一枚，目前只能想到这些了，以后想到再补。

Webpack + Babel

在 webpack 中使用 Babel 通过使用 babel-loader 即可，babel 中的配置可以通过 options 选项进行配置。安装：

npm i babel-loader -D

const config = {
  // ......
  module: {
    rules: [{
      test: /.js$/,
      use:{
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  }
};

module.exports = config;

webpack.config.js

const config = {
  // ......
  module: {
    rules: [{
      test: /.js$/,
      use:[
        'babel-loader'
      ]
    }]
  }
};

module.exports = config;

.babelrc

{
  "presets": [
    "es2015"
  ]
}

Webpack + ESLint

使用 ESLint 使用 eslint-loader 即可，类似于 babel-loader 的使用，安装：

npm i eslint-loader -D

const config = {
  // ......
  module: {
    rules: [{
      test: /.js$/,
      use:[
        'eslint-loader',
        'babel-loader'
      ]
    }]
  }
};

module.exports = config;

Webpack + Sass

在 Webpack 中对 Sass 进行编译需要使用 sass-loader，而 sass-loader 依赖于 node-sass 和 webpack，因此需要安装

npm i node-sass sass-loader webpack -D

由于 sass 没有提供重写 url 的功能，因此所有的链接资源都是相对于输出文件（output）来说的，因此在实际开发中通常会加入 resolve-url-loader 来实现资源 url 的正常使用

npm i resolve-url-loader -D

和 style-loader、css-loader 一起使用，这样就可以正常使用编译 sass 了

const config = {
  // ......
  module: {
    rules: [{
      test: /.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'resolve-url-loader',
        'sass-loader?sourceMap'
      ]
    }]
  }
};

module.exports = config;

Webpack + Less

类似于 Sass 的使用，Less 的编译只需要安装 less-loader 即可

npm i less-loader -D

const config = {
  // ......
  module: {
    rules: [{
      test: /.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }]
  }
};

module.exports = config;