loader 的理解

【 webpack3.0.0刚刚出来  因此文章是跟着低版本 教程 操做熟悉  结果好多对不上喔】

四：理解less-loader加载器的使用

    咱们先来理解下less-loader加载器，其余的sass-loader也是一个意思，这边不会对全部的预处理的css作讲解，less-loader加载器是把css代码转化到style标签内，动态插入到head标签内；咱们先来看看我项目的结构以下：

咱们如今css文件下有一个main.less 代码以下：

@base: #f938ab;
html,body {
  background:@base;
}

Src文件下有一个main.js文件 此js文件时入口文件；里面的代码以下：

// css

require('../css/main.less');

webpack.config.js 代码配置以下：

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build/build.js",
    path: __dirname
  },
  module: {
    loaders: [
      //.css 文件使用 style-loader 和 css-loader 来处理
      {
        test: /\.less$/,
        loader: "style!css!less"
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: []
};

Gulpfile.js代码以下(注意：这边既能够须要此文件使用gulp进行运行打包，也能够不须要此文件，直接使用webpack进行打包；二种方式任选其一)。

var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");

gulp.task('webpack', function () {
    var myConfig = Object.create(webpackConfig);
    return gulp
        .src('./src/main.js')
        .pipe(webpack(myConfig))
        .pipe(gulp.dest('./build'));
});

// 注册缺省任务
gulp.task('default', ['webpack']);

所以咱们须要安装 style-loader css-loader 和 less-loader 以下所示：

 安装完成后，咱们查看咱们的项目的根目录node_modules下多了以下几个文件：

如上配置后，咱们进入项目后 运行下 gulp或者 webpack命令既可，在build文件夹内会生成build.js，此JS是动态生成style标签并解释正常的css插入到文档head标签内；咱们能够运行下页面，查看代码看下以下：

所以咱们能够看到页面生效了；为了更好的demo测试，我把代码放到以下github上，本身能够下载下来运行下既可：https://github.com/tugenhua0707/webpack-less-loader

回到顶部

 

五：理解babel-loader加载器的含义

babel-loader加载器能将ES6的代码转换成ES5代码，这使咱们如今可使用ES6了；咱们在使用以前，咱们须要安装babel-loader

执行命令：npm install babel-loader –save-dev 以下所示：

如上安装完后，咱们在根目录node_modules会生成文件，以下所示：

如今咱们能够在webpack.config.js里面moudle.loaders配置加载器了，以下代码：

{test: /\.js$/, loader: 'babel', exclude: '/node_modules/'} 

所以webpack.config.js代码变成以下：

// 使用webpack打包
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build.js",
    path: __dirname
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: 'babel', exclude: '/node_modules/'}
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: []
};

下面咱们再来看看我项目中的目录结构以下：

咱们在看看src源文件有下面几个文件

React.min.js是react源码，这个很少说，bind.js的ES6的代码以下：

// es6的语法 let LOADER = true; module.exports = LOADER;

main.js 是页面的入口文件；代码以下：

let loader = require('./bind');
console.log(loader);

let是ES6的语法 至关于js中的var定义变量的含义； 接着打印下bind模块中 打印为true；

最后执行gulp以下：

{复制篇}在控制台中打印true；我把源码放在github上，有须要的同窗能够本身下载下来运行下便可；以下github(我2年没有使用github，如今从新使用，为了更好的演示demo问题)； https://github.com/tugenhua0707/webpack-babel-loader