處理項目中的資源文件--loader

使用babel-loader轉換ES6代碼：

（一）安裝loader需要npm install 來安裝

（二）在webpack.config.js中新加一個module, rules 是要引入的loader, 它是一個數組，test是正則，如果匹配上了就使用loader中的loader

module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules', // 排除處理範圍
      include: __dirname + 'src', // 需要處理的範圍
      options: { 
        presets: ['env'] // 版本
      }
    }]
  },

安裝：babel相關的都要安裝

npm install -D babel-loader @babel/core @babel/preset-env

exclude、include可以提升打包速度

（二）處理項目中的css

安裝css-loader、style-loader 

cnpm i css-loader style-loader -D

style-loader和css-loader作用是不同的。

• css-loader: 加載.css文件
• style-loader:使用<style>將css-loader內部樣式注入到我們的HTML頁面

注意這裏loader的順序不能顛倒，webpack是自下而上解析的，只有通過css-loader處理css後才能通過style-loader生成<style></style>標籤。

webpack.config.js 中 module中配置

module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env'] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 從右向左處理，先執行css-loader再style-loader
    }]
  }

現在只是處理成功了內聯樣式

（二）處理less 安裝less-loader、less

cnpm i less-loader less -D

module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env'] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 從右向左，先執行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', 'css-loader', 'less-loader']
    }]
  }

在 內聯樣式中可以看到

（三）處理scss 安裝 scss-loader 

配置

module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env'] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 從右向左，先執行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', 'css-loader', 'less-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }]
  }