Question

这是我的babel-loader

的webpack2配置

根据流行的github问题，我提到了['es2015', { 'modules': false }]而不是es2015 https://github.com/webpack/webpack.js.org/issues/154

我没有.babelrc，我的所有配置都在webpack.config loader config

中

编辑:: 我删除的部分在上面的代码段中似乎有些不合时宜但实际的配置是

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
const devServerSettings = require('./dev_server.json');


module.exports = {
  entry: {
    build: [
      `webpack-dev-server/client?${devServerSettings.FLASH_WEBPACK_URL}`, // WebpackDevServer host and port
      'webpack/hot/only-dev-server',
      './flash/ver_static/js/react/app.js',
    ],
    vendor: ['react', 'moment', 'react-router'],
  },
  output: {
    filename: '[name]-[hash].js', // this is the default name, so you can skip it
    path: path.join(__dirname, 'flash/ver_static/js'),
    publicPath: `${devServerSettings.FLASH_HOST_URL}/assets/`,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/],
        use: [
          { loader: 'react-hot', }, 
          {
            loader: 'babel',
            options: {
              presets: [['es2015', { 'modules': false }], 'stage-0', 'react'],
              plugins: [
                'transform-runtime',
                'lodash',
              ],
            },
          },
        ],
      }, {
        test: /\.scss$/,
        use: [
          { loader: 'style' },
          { loader: 'css' },
          {
            loader: 'postcss',
            options: {
              plugins: function() {
                return [autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })]
              },
            },
          },
          { loader: `sass?sourceMap?indentedSyntax=sass&includePaths[]=${path.join(__dirname, 'flash/ver_static/css')}` },
        ],
      },
    ],
  },
  resolveLoader: {
    moduleExtensions: ['-loader'],
  },
  externals: {
    // don't bundle the jquery npm package with our bundle.js
    // but get it from a global jQuery variable
    jquery: 'jQuery',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor-[hash].min.js' }),
    new BundleTracker({ filename: './webpack-stats.json' }),
  ],
};

babel加载器不包括transform-es2015-modules-commonjs，但webpack 2不负责读取es6模块

**编辑：package.json devDependencies

"devDependencies": {
    "autoprefixer": "^6.1.0",
    "babel-core": "^6.7.4",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.0",
    "babel-plugin-add-react-displayname": "0.0.3",
    "babel-plugin-lodash": "^3.1.4",
    "babel-plugin-transform-react-remove-prop-types": "^0.2.9",
    "babel-plugin-transform-react-stateless-component-name": "^1.0.2",
    "babel-plugin-transform-runtime": "^6.6.0",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.6.1",
    "css-loader": "^0.22.0",
    "deep-freeze": "0.0.1",
    "eslint": "^3.14.0",
    "eslint-config-airbnb": "^14.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^3.0.2",
    "eslint-plugin-react": "^6.9.0",
    "extract-text-webpack-plugin": "^2.0.0-rc.2",
    "lodash-webpack-plugin": "^0.4.0",
    "node-sass": "^3.7.0",
    "object-assign": "^4.1.0",
    "postcss-loader": "^0.7.0",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.1.1",
    "style-loader": "^0.13.0",
    "uglify-js": "^2.4.24",
    "underscore": "^1.8.3",
    "webpack": "^2.2.1",
    "webpack-bundle-tracker": "0.0.93",
    "webpack-dev-server": "^2.2.0",
    "webpack-validator": "^2.2.12"
  }

编辑：app.js文件

// vendor modules
import React from 'react';
import { render } from 'react-dom';
import { Router, hashHistory } from 'react-router';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';
import 'jquery.cookie';
// redux modules
import appStore from './store/';
// utility modules
import routes from './routes';
import './utils/errorLogging';
// css modules
import '../../css/belong.scss';


// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(hashHistory, appStore);

export default render((
  <Provider store={appStore}>
    <Router routes={routes} history={history} />
  </Provider>
), $('#app').get(0));

我收到这样的错误

Module parse failed: /home/avinash/code/flash/node_modules/react-hot-loader/index.js!/home/avinash/code/flash/node_modules/babel-loader/lib/index.js??ref--0-1!/home/avinash/code/flash/flash/ver_static/js/react/app.js 'import' and 'export' may only appear at the top level (4:0)
You may need an appropriate loader to handle this file type.

Answer 1

尝试将exclude: [/node_modules/]添加到webpack config

的babel-loader部分

webpack-dev-server 2在使用es2015 babel预设模块时无法捆绑es6模块：false

1 个答案: