这就是我在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。但是,如果我使用上面的代码,则会收到此错误消息。
任何人都可以告诉我问题出在哪里以及如何解决这个问题。
谢谢。