webpack的现状/反应形态

Question

我试图设置一个webpack 2，babel，和反应配置，以实现：

• 原生ES6/ES7特性
• 树摇建
• 热重装

我有一个演示回购，但它有不同的东西混合，甚至JSHint和ESLint在同一时间。

我想让我的设置和运行，并获得关于最佳实践的建议

因此，作为第一种选择，我尝试使用babel-preset-env。然后在安装了一些依赖项之后。我遇到了这个问题：

ERROR in ./src/main.jsx Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (3:0)

但是，我的代码中的第一行是import 'babel-polyfill';，然后是import。

这就是我的Babel配置文件的样子：

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }
    ],
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties",
    "transform-react-require"
  ]
}

这就是我的开发webpack配置文件的样子：

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
    //Entry points to the project
    entry: [
        'babel-polyfill',
        'webpack/hot/dev-server',
        'webpack/hot/only-dev-server',
        path.join(__dirname, '../src/main.jsx')
    ],
    //Config options on how to interpret requires imports
    resolve: {
        extensions: [".js", ".jsx"]
    },
    //Server Configuration options
    devServer:{
        contentBase: 'build',  //Relative directory for base of server
        devtool: 'eval',
        hot: true,        //Live-reload
        inline: true,
        port: 3000,        //Port Number
        host: 'localhost', //Change to '0.0.0.0' for external facing server
        proxy: {
            '^\/api': {
                target: 'http://127.0.0.1:9090'
            }
        },
        historyApiFallback: true
    },
    devtool: 'eval',
    output: {
        path: buildPath,    //Path of output file
        filename: 'app.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            API_BASE: '""',
            PRODUCTION: false,
            'process.env.NODE_ENV': '"development"'
        }),
        //Enables Hot Modules Replacement
        new webpack.HotModuleReplacementPlugin(),
        //Allows error warnings but does not stop compiling. Will remove when eslint is added
        new webpack.NoEmitOnErrorsPlugin(),
        //Moves files
        new TransferWebpackPlugin([
            {from: 'www'}
        ], path.resolve(__dirname, "src")),
        new ExtractTextPlugin("main.css")
    ],
    module: {
        rules: [
            {
                //React-hot loader and
                test: /\.(js|jsx)$/,  //All .js and .jsx files
                loaders: [ 'babel-loader', 'react-hot-loader'],
                //react-hot is like browser sync and babel loads jsx and es6-7
                exclude: [nodeModulesPath]
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style',
                    use: 'css'
                })
            },
            {
                test: /\.svg$/,
                loader: 'svg-sprite?' + JSON.stringify({
                    name: '[name]_[hash]',
                    prefixize: true
                })
            }
        ]
    }
};

module.exports = config;

下面是package.json

{
  "name": "LumaHealth",
  "version": "1.0.0",
  "description": "LumaHealth",
  "main": "start.js",
  "scripts": {
    "start": "webpack --config ./webpack/webpack.config.development.js",
    "build": "webpack --config ./webpack/webpack.config.production.js",
    "clean": "rm build/app.js"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:lumahealthhq/web-app.git"
  },
  "keywords": [],
  "author": "Marcelo Oliveira",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-eslint": "^7.2.1",
    "babel-plugin-react-require": "^3.0.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-preset-env": "^1.2.2",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.26.4",
    "enzyme": "^2.0.0",
    "eslint": "^3.7.1",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-loader": "^1.7.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.4.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^2.28.0",
    "nyc": "^10.1.2",
    "postcss-loader": "^1.3.3",
    "postcss-nested": "^1.0.0",
    "react-addons-test-utils": "^15.4.1",
    "sinon": "^1.17.2",
    "style-loader": "^0.13.2",
    "sw-precache": "^5.0.0",
    "transfer-webpack-plugin": "^0.1.4",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "babel-core": "^6.5.2",
    "babel-eslint": "^7.0.0",
    "babel-plugin-transform-react-require": "^1.0.1",
    "babel-polyfill": "^6.23.0",
    "co": "^4.6.0",
    "express": "^4.12.3",
    "file-loader": "^0.10.1",
    "humps": "^2.0.0",
    "isomorphic-fetch": "^2.2.1",
    "local-storage": "^1.4.2",
    "lodash": "^4.16.4",
    "material-ui": "^0.17.0",
    "moment": "^2.15.2",
    "q": "^1.4.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.6",
    "react-slick": "^0.14.4",
    "react-tap-event-plugin": "^2.0.0",
    "react-web-notification": "^0.2.3",
    "redux": "^3.6.0",
    "redux-form": "^6.1.1",
    "redux-logger": "^2.7.0",
    "redux-socket.io": "^1.3.1",
    "redux-thunk": "^2.1.0",
    "socket.io-client": "^1.7.2",
    "url-loader": "^0.5.7",
    "vanilla-masker": "^1.0.9"
  }
}

Answer 1

我最近把我的样板从webpack 1升级到webpack 2，随时可以从那里获得任何信息/概念，希望它能有所帮助。

https://github.com/iroy2000/react-redux-boilerplate