处理项目中的资源文件--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']
    }]
  }