2017-04-23 128 views
0

为什么不是我的babel-loader发送? 我已添加:let x ='LOL';的console.log(X);到我的src/main.js。 它不输出任何错误并创建输出文件。但它不会将es6语法转换为es5。babel-loader没有发生错误并且没有错误

这是我的src/main.js

var css = require('./styles.scss'); 

console.log('hello planet!'); 

let x = 'LOL'; 
console.log(x); 

和我的输出文件DIST/bundle.min.js看起来像这样(让未启用到VAR):

/******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 
/******/ 
/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 
/******/ 
/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) { 
/******/   return installedModules[moduleId].exports; 
/******/  } 
/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   i: moduleId, 
/******/   l: false, 
/******/   exports: {} 
/******/  }; 
/******/ 
/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
/******/ 
/******/  // Flag the module as loaded 
/******/  module.l = true; 
/******/ 
/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 
/******/ 
/******/ 
/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 
/******/ 
/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 
/******/ 
/******/ // identity function for calling harmony imports with the correct context 
/******/ __webpack_require__.i = function(value) { return value; }; 
/******/ 
/******/ // define getter function for harmony exports 
/******/ __webpack_require__.d = function(exports, name, getter) { 
/******/  if(!__webpack_require__.o(exports, name)) { 
/******/   Object.defineProperty(exports, name, { 
/******/    configurable: false, 
/******/    enumerable: true, 
/******/    get: getter 
/******/   }); 
/******/  } 
/******/ }; 
/******/ 
/******/ // getDefaultExport function for compatibility with non-harmony modules 
/******/ __webpack_require__.n = function(module) { 
/******/  var getter = module && module.__esModule ? 
/******/   function getDefault() { return module['default']; } : 
/******/   function getModuleExports() { return module; }; 
/******/  __webpack_require__.d(getter, 'a', getter); 
/******/  return getter; 
/******/ }; 
/******/ 
/******/ // Object.prototype.hasOwnProperty.call 
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 
/******/ 
/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 
/******/ 
/******/ // Load entry module and return exports 
/******/ return __webpack_require__(__webpack_require__.s = 1); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ (function(module, exports) { 

// removed by extract-text-webpack-plugin 

/***/ }), 
/* 1 */ 
/***/ (function(module, exports, __webpack_require__) { 

var css = __webpack_require__(0); 

console.log('hello planet!'); 

let x = 'LOL'; 
console.log(x); 

/***/ }) 
/******/ ]); 

我的WebPack .config.js:

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: './src/main.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'bundle.min.js' 
    }, 
    module: { 
     rules: [{ 
      test: /\.js$/, 
      exclude: /(node_modules|bower_components)/, 
      use: { 
       loader: 'babel-loader', 
       options: { 
        presets: ['env'] 
       } 
      }, 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: ['css-loader', 'sass-loader'], 
       publicPath: "/dist" 
      }) 
     }] 
    }, 
    devServer: { 
     contentBase: path.join(__dirname, "dist"), 
     compress: true, 
     stats: "errors-only" 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      title: 'Custom template', 
      // minify: { 
      //  collapseWhitespace: true 
      // }, 
      hash: true, 
      // filename: './../index.html', 
      template: './src/template.html', 
     }), 
     new ExtractTextPlugin({ 
      filename: "style.css", 
      disable: false, 
      allChunks: true 
     }) 
    ] 
} 

我的package.json:

{ 
    "name": "pack3", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "webpack-dev-server --open", 
    "dev-old": "webpack -d --watch", 
    "prod": "webpack", 
    "clean": "rimraf ./dist/*" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-env": "^1.4.0", 
    "css-loader": "^0.28.0", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "html-webpack-plugin": "^2.28.0", 
    "node-sass": "^4.5.2", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "rimraf": "^2.6.1", 
    "sass-loader": "^6.0.3", 
    "style-loader": "^0.16.1", 
    "webpack": "^2.4.1", 
    "webpack-dev-server": "^2.4.4" 
    } 
} 

回答

1

您的规则数组只包含一条规则,其中您使用两次testuse属性。结果对象只包含上次看到的定义的值,因此您只有.scss规则。你想在数组中有两个不同的对象,每个对象都是不同的规则。

module: { 
    rules: [ 
     { 
      test: /\.js$/, 
      exclude: /(node_modules|bower_components)/, 
      use: { 
       loader: 'babel-loader', 
       options: { 
        presets: ['env'] 
       } 
      } 
     }, 
     { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: ['css-loader', 'sass-loader'], 
       publicPath: "/dist" 
      }) 
     } 
    ] 
}, 
相关问题