当我运行npm run build命令时,模块构建失败?

时间:2018-08-23 19:52:54

标签: reactjs npm webpack babel

This my folder structure in the project. The index.bundle.js is a dummy file which I created manually.

这就是我在webpack.config.js中想要的

//const path = require('path');
//const webpack = require('webpack');
//module.exports = { 
//  entry: './src/index.js',
//  output: {
//    path: path.resolve(__dirname, 'build'),
//    filename: 'index.bundle.js'
//  },  
//  devtool: 'inline-source-map',
//  devServer: {
//    contentBase: './build',
//    port: 3000
//  },  
//  module: {
//      loaders: [ 'babel?presets[]=react,presets[]=env' ],
//    rules: [
//      {test: /\.js$/, exclude: /node_modules/, use: 'babel-loader'}  
//    ]   
//  }
//}



const path = require('path');

module.exports = {
  entry: ['core-js/fn/promise', './src/index.js'],
  output: {
    // this is where the bundle.js will be saved
    path: path.resolve(__dirname, 'build'),
    // this is where webpack-dev-server will serve its bundled files
    publicPath: '/',
    filename: 'index.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
},
  resolve: {
    extensions: [' ', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

//var projectRoot = process.env.PWD; // Absolute path to the project root
//var resolveRoot = path.join(projectRoot, 'node_modules'); // project root/node_modules
//const path = require('path');
//module.exports = {
//context: path.join(process.env.PWD, 'src'),
//  entry: { main: './src/index.js' },
//  output: {
//    path: path.resolve(__dirname, 'build'),
//    filename: 'index.bundle.js'
//  },
//  module: {
//    rules: [
//      {
//        test: /\.js$/,
//        exclude: /node_modules/,
//        use: {
//          loader: "babel-loader"
//        }
//      }
//    ]
//  }
//};

//var projectRoot = process.env.PWD; // Absolute path to the project root
//var resolveRoot = path.join(projectRoot, 'build'); // project root/node_modules
//const path = require('path');
//const webpack = require('webpack');
//var webpackConfig = {
//    context: path.join(process.env.PWD, 'src'),
//    entry: { main: './src/index.js' },
//   output: {
//      path: config.build, // ./dist
//      filename: 'index.bundle.js'
//    },
//    plugins: [],
//    resolve: {
//      root: [
//        resolveRoot,
//        path.join(__dirname, 'build')
//      ],
//      extensions: ['', '.js']
//    },
//    module: {
//      rules: [
//        {
//          test: /\.js$/,
//           exclude: /node_modules/,
//      use: {
//        loader: "babel-loader"      }
//        }
//      ]
//    }
//  };

这是package.json中的“我的脚本”部分

 "scripts": {
    "dev": "webpack --mode development",
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production",
    "clean": "rimraf ./build/index.bundle.js",
    "compile": " SET NODE_ENV=production webpack --config ./webpack.config.js --progress"
  },

这就是我在index.js中写的

import React, {Component} from 'react'
import {render} from 'react-dom'

const App = () => {
 return <div>
  <h1>React App Running!</h1>
 </div>
}

render(
 <App/>,
 document.getElementById('root')
)


//import React from 'react';
//import ReactDOM from 'react-dom';
//import 'bootstrap/dist/css/bootstrap.min.css';
//import Router from "./components/Router";
//import registerServiceWorker from './registerServiceWorker';
//
//ReactDOM.render(<Router />, document.getElementById('root'));
//registerServiceWorker();

//console.log("hello world");

当我在index.js中使用简单的console.log语句时,将生成index.bundle.js。但是,如果我使用上面的代码,则会收到此错误消息。

任何人都可以告诉我问题出在哪里以及如何解决这个问题。

谢谢。

0 个答案:

没有答案