webpack学习篇4

处理项目中的资源文件

loader：用来处理资源文件的，接受资源文件为一个参数，处理完了会返回一个新的资源，这个过程就是loader的处理。

一、处理js文件

安装babel-loader

npm install babel-loader babel-core —save-dev

使用babe还需要给一个配置，指定一个presets来告诉babel-loader将js转换成什么特性。比如es5、或者是包含所有特性。所有特性可以指定为latest。latest会包含es2015、es2016、es2017等等。
先安装latest才能使用

npm install babel-preset-latest —save-dev

presets有三种使用方法：
1、在loaders的参数里配置

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,  //正则表达式
        loader: ‘babel-loader’,  //可以简写为babel
        query: {
          presets: [‘latest’]
        }
      }
    ]
  }
}

2、在项目的根目录下建立一个.babelrc的配置文件。文件内容如下：

//只有一个对象
{
  ‘presets’: [‘latest’]
}

3、在package.json里定义babel

‘babel’: {
  ‘presets’: [‘latest’]
}

想拿到一个绝对路径怎么写？
node中有一个自带的API叫path

var path = require(‘path’)
//path对象上有一个方法叫resolve解析
path.resolve(__dirname, ‘app/src’)

__dirname: 在运行环境下的变量，也就是当前运行环境的路径。
第二个参数是要用文件的相对路径
resolve解析当前的环境，当前的目录去找这个文件的相对路径，解析玩后就会得到那个文件的绝对路径。

二、处理项目中的css文件

//先安装
npm install style-loader css-loader —save - dev

配置css的loader

module.exports = {
  module:{
    loaders:[{
      test: /\.css$/,
      loader: ‘style-loader!css-loader’
      //或者写成loaders: [‘style-loader’, ‘css-loader’]
    }]
  }
}

注意：loader的处理方式是从右到左

三、处理项目中的less文件和sass文件

先安装webpack相关的loader

//less的loader
npm install less-loader—save -dev
//sass的loader
npm install sass-loader —save -dev

//用法
loaders: [
  { //处理less
    test: /\.less$/,
    loader: ‘style-loader!css-loader!less-loader’
  },
  {  //处理sass
    test: /\.scss$/,
    loader: ‘style-loader!css-loader!sass-loader’
  }
]

四、处理模版文件（.html）

//安装loader
npm install html-loader —save -dev

//用法
loaders: [{
  test: /\.html$/,
  loader: ‘html-loader’
}]

五、处理图片及其他文件

//安装loader
npm install file-loader —save -dev

//用法
loaders: [{
  test: /\.(png|jpg|gif|svg)$/i,
  loader: ‘file-loader’
}]