babel-loader不能转译

Question

我正在试着让我的头脑去理解webpack，并且为此我正在建立一个小的项目，叫“webpack”。

到目前为止，它将我的两个入口点及其依赖项移动到dist文件夹，但没有一个文件被转译。我已经设置了babel-loader，并安装了正确的预设，但仍然没有什么工作。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: {
    main: "./main",
    renderer: "./app/js/renderer"
  },
  output: {
      path: __dirname + "/dist",
      filename: "[name].bundle.js"
  },
  target: "electron",
  plugins: [new HtmlWebpackPlugin({
    title: 'Electron Test',
    chunks: ['renderer'],
    inject: 'body',
    hash: 'true'
  })],
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|dist)/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'stage-0']
      }
    }
  ]
};

我是不是错过了什么？

我的package.json如下：

    {
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "Electron boilerplate with ES6, SCSS and packaging.",
  "main": "main.js",
  "scripts": {
    "start": "npm run build && electron lib",
    "build": "rm -rf ./dist && webpack ."
  },
    "keywords": [
    "Electron",
    "boilerplate"
  ],
  "author": "CWright",
  "license": "CC0-1.0",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-0": "^6.5.0",
    "html-webpack-plugin": "^2.22.0",
    "webpack": "^1.13.2",
    "webpack-validator": "^2.2.7"
  },
  "dependencies": {
    "electron": "^1.3.2" 
  }
}

Answer 1

我不太确定哪里出了问题，但我在这里看到了一些东西。

首先，确定您正在运行的babel的版本，对于这个设置，我基于

 "babel-core": "5.8.25",
 "babel-loader": "5.3.2"

1-创建一个外部.babelrc文件，在其中放入stage0变量，我注意到你放入了查询，我没有像你那样尝试，但我的作为外部文件工作得很好，我不需要放es2015。

{stage:0}

2-如果你在windows上，你应该使用一个变通方法来修复路径，我确实是这样使用我的配置的：

标题：

const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
const srcPath = path.join(__dirname, 'src');

3-您的入口点应该考虑实际路径：

 entry: {
    app: path.join(srcPath, 'main.js') // see that the srcPath is the folder 'src' mapped in the const, this should be where your js files are to be loaded from.
}

4-输出文件夹

output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
    publicPath: "",
  }

5-和加载器：

 module: {
    loaders: [
      {test: /\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'}
]
  }

6-还要在您的webpack配置的末尾添加一个解析，这是修复路径的变通方法的一部分：

 resolve: {
    extensions: ["", ".js"],
    modulesDirectories: ["src", "node_modules"],
    root: [__dirname + path.sep + 'scripts'],
  }

如果你想在开发和生产环境中使用节点变量，可以查看下面的答案：Why is my webpack bundle.js and vendor.bundle.js so incredibly big?