Question

我正在尝试设置webpack 2，babel和React配置以实现：

原生ES6 / ES7功能
树摇晃构建
热重装

我有一个演示回购，但它有不同的东西混合，就像JSHint和ESLint同时一样。

我想让我的设置正常运行，并获得最佳做法的建议

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

dynamic

但是，我的代码中的第一行是ERROR in ./src/main.jsx Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (3:0)，而只是import 'babel-polyfill';。

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

import

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

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

以下是 package.json

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;

Answer 1

我最近将我的样板文件从webpack 1升级到webpack 2，随时从webpack配置文件中获取任何信息/概念，希望它有所帮助。

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

最先进的webpack / React配置

1 个答案: