Webpack系列——Webpack + xxx配合使用

文章首發於個人github及我的博客，github請看https://github.com/huruji/blo...，轉載請註明出處。
渣渣一枚，目前只能想到這些了，之後想到再補。

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;