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