Question

HI： 我使用create-react-app创建react应用并且我需要使用webpack来构建我的项目，以便在Electron中将其用作桌面应用程序

但是我运行webpack --mode development --watch之后 webpack显示下一个错误

webpack is watching the files…                                                                                              

Hash: 7e114c5670c6d14690fd                                                                                                  
Version: webpack 4.20.2                                                                                                     
Time: 1636ms                                                                                                                
Built at: 2018-09-30 08:49:52                                                                                               
        Asset      Size  Chunks             Chunk Names                                                                   
index-bundle.js   891 KiB    main  [emitted]  main                                                                          
    index.html  1.62 KiB          [emitted]                                                                                
Entrypoint main = index-bundle.js                                                                                           
[./index.js] 426 bytes {main} [built]                                                                                       
    + 45 hidden modules                                                                                                     

ERROR in ./index.js                                                                                                         
Module not found: Error: Can't resolve 'routes' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'                           
@ ./index.js 5:0-28 10:23-29                                                                                               

ERROR in ./index.js                                                                                                         
Module not found: Error: Can't resolve 'store' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'                            
@ ./index.js 4:0-35 9:9-23                                                                                                 

ERROR in ./index.js                                                                                                         
Module not found: Error: Can't resolve 'styles/global-styles' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'             
@ ./index.js 6:0-30                                                                                                        

ERROR in ./index.js                                                                                                         
Module not found: Error: Can't resolve 'utils/registerServiceWorker' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'      
@ ./index.js 7:0-64 11:0-21                                                                                                
Child html-webpack-plugin for "index.html":                                                                                 
    1 asset                                                                                                                
    Entrypoint undefined = index.html                                                                                       
    [../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html] 1.79 KiB {0} [built]                           
        + 3 hidden modules

我的项目结构

C:.
|   .editorconfig
|   .env
|   .eslintignore
|   .eslintrc.json
|   .gitattributes
|   .gitignore
|   .yo-rc.json
|   package-lock.json
|   package.json
|   README.md
|   webpack.config.js
|   yarn-error.log
|   yarn.lock
|
+---generators
|   |   index.js
|   |
|   +---component
|   |       es6.js.hbs
|   |       es6.pure.js.hbs
|   |       index.js
|   |       stateless.js.hbs
|   |       stateless.pure.js.hbs
|   |
|   +---container
|   |       index.js
|   |       index.js.hbs
|   |
|   \---utils
|           componentExists.js
|           containerExists.js
|
+---public
|       favicon.ico
|       index.html
|       manifest.json
|
\---src
    |   index.js
    |
    +---actions
    |   |   counter.js
    |   |   index.js
    |   |   selectBook.js
    |   |
    |   +---blog
    |   |       appendNewPostToDom.js
    |   |       fetchBlogs.js
    |   |       removePost.js
    |   |       requestPost.js
    |   |       savePost.js
    |   |       selectPost.js
    |   |       showRemovePostDialog.js
    |   |       test_load_data_on_router_init.js
    |   |
    |   \---weather
    |           search.js
    |
    +---assets
    |       logo.svg
    |
    +---components
    |       BooksProject.js
    |       Counter.js
    |       Header.js
    |       index.js
    |       SparkLineWeather.js
    |       weatherProject.js
    |
    +---constants
    |       ActionTypes.js
    |       ApisKeys.js
    |       AutoConstCombination.js
    |       General.js
    |       URLs.js
    |
    +---containers
    |   |   BookDetailsContainer.js
    |   |   BookListContainer.js
    |   |   CounterContainer.js
    |   |   index.js
    |   |
    |   +---blog
    |   |       blogProject.js
    |   |       checkBox.js
    |   |       inlinePost.js
    |   |       newPost.js
    |   |       removePostDialog.js
    |   |       showBlog.js
    |   |       singlePost.js
    |   |
    |   \---weather
    |           googleMaps.js
    |           searchBarContainer.js
    |           weatherList.js
    |
    +---context
    |       index.js
    |
    +---middlewares
    |       promiseMiddleWare.js
    |
    +---reducers
    |   |   books.js
    |   |   bookSelected.js
    |   |   counter.js
    |   |   index.js
    |   |
    |   +---blog
    |   |       appendNewPostToDom.js
    |   |       fetchedBlogs.js
    |   |       fetchePost.js
    |   |       getRemovePostDialog.js
    |   |       postSaved.js
    |   |       selectedPostsIds.js
    |   |
    |   \---weather
    |           fetchedWeather.js
    |
    +---routes
    |       index.js
    |       router_callback.js
    |
    +---selectors
    |       index.js
    |       selectedPost.js
    |
    +---simulate
    |       helpers.js
    |       weatherdata.json
    |       WeatherMap.js
    |
    +---store
    |       index.js
    |       store.dev.js
    |       store.prod.js
    |
    +---styles
    |       global-styles.js
    |
    +---tests
    |       CounterContainer.test.js
    |
    \---utils
            registerServiceWorker.js

Package.json / webpack部分

"reactRedux:webPack:build": "webpack --mode production",
"reactRedux:webPack:dev": "webpack --mode development --watch",
"reactRedux:webPack:solve": "webpack -display-error-details"

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
require('dotenv').config();

console.log('OSAMA,',path.join(__dirname, "src"));
module.exports = {
context: path.join(__dirname, "src"),
entry: "./index.js",
output: {
    path: path.join(__dirname, "dist"),
    filename: "index-bundle.js"
},
module: {
    rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
    },
    {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
    }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
    template: "./../public/index.html"
    })
]
};

现在我可以通过修改src/index.js

来解决这个问题

来自

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from 'store'
import Routes from 'routes'
import 'styles/global-styles'
import registerServiceWorker from 'utils/registerServiceWorker'

render(
<Provider store={configureStore()}>
    <Routes />
</Provider>,
document.getElementById('root')
)
registerServiceWorker()

收件人

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './store'
import Routes from './routes'
import './styles/global-styles'
import registerServiceWorker from './utils/registerServiceWorker'

render(
  <Provider store={configureStore()}>
    <Routes />
  </Provider>,
  document.getElementById('root')
)
registerServiceWorker()

但这会产生下一个错误

Hash: fe8872d4e25816fb9eea
Version: webpack 4.20.2
Time: 12754ms
Built at: 2018-09-30 09:15:23
1 asset
Entrypoint main = index-bundle.js
[21] ./store/index.js 142 bytes {0} [built]
[27] ./utils/registerServiceWorker.js 3.91 KiB {0} [built]
[51] ./index.js + 43 modules 96.2 KiB {0} [built]
    | ./index.js 434 bytes [built]
    | ./styles/global-styles.js 1.72 KiB [built]
    | ./routes/index.js 1.81 KiB [built]
    | ./routes/router_callback.js 299 bytes [built]
    |     + 40 hidden modules
[52] ./store/store.prod.js + 3 modules 8.93 KiB {0} [built]
    | ./store/store.prod.js 529 bytes [built]
    |     + 3 hidden modules
    + 68 hidden modules

ERROR in ./routes/router_callback.js
Module not found: Error: Can't resolve 'actions' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/router_callback.js 4:0-51
@ ./routes/index.js
@ ./index.js

ERROR in ./routes/index.js
Module not found: Error: Can't resolve 'components' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/index.js 21:0-66 39:15-21 45:15-27 48:15-29
@ ./index.js

ERROR in ./routes/index.js
Module not found: Error: Can't resolve 'containers' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/index.js 20:0-78 42:15-31 51:15-26 54:15-22 57:15-23
@ ./index.js

ERROR in ./store/store.prod.js
Module not found: Error: Can't resolve 'reducers' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\store'
@ ./store/store.prod.js 3:0-35 9:36-47
@ ./store/index.js
@ ./index.js

ERROR in ./routes/router_callback.js
Module not found: Error: Can't resolve 'store' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/router_callback.js 3:0-26
@ ./routes/index.js
@ ./index.js
Child html-webpack-plugin for "index.html":
    1 asset
    Entrypoint undefined = index.html
    [0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
        + 3 hidden modules
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

而且我也知道如何解决此错误make all imports relative to ./src

例如src/routes/router_callback.js

转换来自

的导入

import store from 'store';
import {testLoadDataInRouterInit} from 'actions';

收件人

import store from './../store';
import {testLoadDataInRouterInit} from './../actions';

这将消除与./routes/router_callback.js相关的错误

但是在逻辑上浏览所有文件并修改所有导入不是逻辑上的而且我不明白为什么context中的webpack.config.json选项无法解决这个问题

因此，我需要任何解决方案来将./src/标记为import的根目录另外，如果您能解释为什么Webpack会采取这种奇怪的行为

或ugly-solution任何工具来执行路径转换操作eg. node package

解决步骤

我通过使用resolve.alias解决了问题

在webpack.config.js中

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
require('dotenv').config();

console.log('OSAMA,',path.join(__dirname, "src"));
module.exports = {
context: path.join(__dirname, "src"),
entry: "./index.js",
output: {
    path: path.join(__dirname, "dist"),
    filename: "index-bundle.js"
},
resolve: {
    alias: {
    store:path.resolve(__dirname, 'src/store/'),
    actions:path.resolve(__dirname, 'src/actions/'),
    assets:path.resolve(__dirname, 'src/assets/'),
    components:path.resolve(__dirname, 'src/components/'),
    containers:path.resolve(__dirname, 'src/containers/'),
    constants:path.resolve(__dirname, 'src/constants/'),
    context:path.resolve(__dirname, 'src/context/'),
    selectors:path.resolve(__dirname, 'src/selectors/'),
    middlewares:path.resolve(__dirname, 'src/middlewares/'),
    reducers:path.resolve(__dirname, 'src/reducers/'),
    routes:path.resolve(__dirname, 'src/routes/'),
    simulate:path.resolve(__dirname, 'src/simulate/'),
    styles:path.resolve(__dirname, 'src/styles/'),
    tests:path.resolve(__dirname, 'src/tests/'),
    utils:path.resolve(__dirname, 'src/utils/'),
    }
},
module: {
    rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
    },
    {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
    }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
    template: "./../public/index.html"
    })
]
};

但是现在这会产生下一个错误

Hash: d1dcce3dbddfd7e67373                                                                                                             
Version: webpack 4.20.2                                                                                                                
Time: 1565ms                                                                                                                           
Built at: 2018-09-30 09:53:04                                                                                                          
1 asset                                                                                                                               
Entrypoint main = index-bundle.js                                                                                                      
[0] ./index.js 1.93 KiB {0} [built] [failed] [1 error]                                                                                 

ERROR in ./index.js                                                                                                                    
Module build failed (from ../node_modules/babel-loader/lib/index.js):                                                                  
ReferenceError: [BABEL] C:\ncourses\nodejs\ElectronWorks\Combine\src\index.js: Unknown option: .inherits. Check out https://babeljs.io/
docs/en/babel-core/#options for more information about options.                                                                        
    at throwUnknownError (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:123:11)   
    at Object.keys.forEach.key (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:107:
5)                                                                                                                                     
    at Array.forEach (<anonymous>)                                                                                                     
    at validateNested (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:83:21)       
    at validate (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:74:10)             
    at instantiatePreset (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:244:36)                 
    at cachedFunction (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\caching.js:33:19)                  
    at loadPresetDescriptor (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:235:45)              
    at config.presets.reduce (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:77:21)              
    at Array.reduce (<anonymous>)                                                                                                      
    at recurseDescriptors (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:74:38)                 
    at loadFullConfig (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:108:6)                     
    at process.nextTick (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\transform.js:28:33)                     
    at _combinedTickCallback (internal/process/next_tick.js:131:7)                                                                     
    at process._tickCallback (internal/process/next_tick.js:180:9)                                                                     
Child html-webpack-plugin for "index.html":                                                                                            
    1 asset                                                                                                                           
    Entrypoint undefined = index.html                                                                                                  
    [0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]                                    
        + 3 hidden modules                                                                                                             
error Command failed with exit code 2.                                                                                                 
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

与Babel

相关的先前错误

我解决了先前的问题只需将.babelrc设置为

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

对我来说，这会导致svg

出现问题

Hash: 0774fcb11803ab0dab91
Version: webpack 4.20.2
Time: 25132ms
Built at: 2018-09-30 10:12:21
1 asset
Entrypoint main = index-bundle.js
[3] ./constants/ActionTypes.js 665 bytes {0} [built]
[6] ../node_modules/redux-form/es/structure/plain/index.js + 6 modules 6.96 KiB {0} [built]
    |    7 modules
[22] ../node_modules/lodash-es/_baseGetTag.js + 2 modules 2.44 KiB {0} [built]
    |    3 modules
[55] ../node_modules/lodash-es/isArguments.js + 1 modules 1.48 KiB {0} [built]
    |    2 modules
[72] ../node_modules/lodash-es/_baseIsEqual.js + 22 modules 22 KiB {0} [built]
    |    23 modules
[73] ../node_modules/lodash-es/keys.js + 2 modules 1.83 KiB {0} [built]
    |    3 modules
[74] ../node_modules/lodash-es/isTypedArray.js + 2 modules 3.19 KiB {0} [built]
    |    3 modules
[82] ./simulate/helpers.js 1.01 KiB {0} [built]
[143] ./store/index.js 142 bytes {0} [built]
[144] ./reducers/blog/appendNewPostToDom.js 1020 bytes {0} [built]
[145] ./reducers/blog/selectedPostsIds.js 1.07 KiB {0} [built]
[219] ./assets/logo.svg 576 bytes {0} [built] [failed] [1 error]
[222] ./utils/registerServiceWorker.js 3.91 KiB {0} [built]
[470] ./index.js + 164 modules 500 KiB {0} [built]
    | ./containers/blog/removePostDialog.js 6.14 KiB [built]
    | ./index.js 426 bytes [built]
    | ./routes/index.js 1.81 KiB [built]
    | ./routes/router_callback.js 299 bytes [built]
    | ./containers/index.js 698 bytes [built]
    | ./containers/blog/inlinePost.js 6.49 KiB [built]
    | ./containers/blog/singlePost.js 5.44 KiB [built]
    | ./styles/global-styles.js 1.72 KiB [built]
    | ./containers/CounterContainer.js 4.06 KiB [built]
    | ./containers/blog/showBlog.js 5.7 KiB [built]
    | ./containers/blog/newPost.js 9.83 KiB [built]
    | ./containers/blog/blogProject.js 9.26 KiB [built]
    | ./containers/weather/weatherList.js 5.28 KiB [built]
    | ./containers/weather/searchBarContainer.js 4.22 KiB [built]
    | ./containers/BookDetailsContainer.js 2.89 KiB [built]
    |     + 150 hidden modules
[471] ./store/store.prod.js + 15 modules 41.4 KiB {0} [built]
    | ./store/store.prod.js 529 bytes [built]
    | ./reducers/index.js 947 bytes [built]
    | ./reducers/blog/postSaved.js 475 bytes [built]
    | ./reducers/counter.js 466 bytes [built]
    | ./reducers/bookSelected.js 392 bytes [built]
    | ./reducers/weather/fetchedWeather.js 1.2 KiB [built]
    | ./reducers/blog/fetchePost.js 447 bytes [built]
    | ./reducers/books.js 196 bytes [built]
    | ./reducers/blog/getRemovePostDialog.js 569 bytes [built]
    | ./reducers/blog/fetchedBlogs.js 530 bytes [built]
    |     + 6 hidden modules
    + 551 hidden modules

ERROR in ./assets/logo.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|   <g fill="#764ABC">
|     <path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/>
@ ./components/Header.js 42:0-35 62:13-17
@ ./components/index.js
@ ./routes/index.js
@ ./index.js
Child html-webpack-plugin for "index.html":
    1 asset
    Entrypoint undefined = index.html
    [0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
        + 3 hidden modules
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我解决了svg问题通过使用inline-react-svg plugin

{
"presets": ["@babel/env", "@babel/react"],
"plugins":[
    [
    "@babel/plugin-proposal-class-properties",
    {
        "loose": true
    }
    ],
    "inline-react-svg"
]
}

此外，我们需要在header.js中更改导入来自

import logo from 'assets/logo.svg'

收件人

import logo from '../assets/logo.svg'

最终结果

Hash: a38f27a1d8891a88af43
Version: webpack 4.20.2
Time: 24274ms
Built at: 2018-09-30 10:29:01
        Asset      Size  Chunks                    Chunk Names
index-bundle.js   880 KiB       0  [emitted]  [big]  main
    index.html  1.62 KiB          [emitted]
Entrypoint main [big] = index-bundle.js
[3] ./constants/ActionTypes.js 665 bytes {0} [built]
[6] ../node_modules/redux-form/es/structure/plain/index.js + 6 modules 6.96 KiB {0} [built]
    |    7 modules
[22] ../node_modules/lodash-es/_baseGetTag.js + 2 modules 2.44 KiB {0} [built]
    |    3 modules
[48] ../node_modules/lodash-es/_Stack.js + 5 modules 2.78 KiB {0} [built]
    |    6 modules
[55] ../node_modules/lodash-es/isArguments.js + 1 modules 1.48 KiB {0} [built]
    |    2 modules
[72] ../node_modules/lodash-es/_baseIsEqual.js + 22 modules 22 KiB {0} [built]
    |    23 modules
[73] ../node_modules/lodash-es/keys.js + 2 modules 1.83 KiB {0} [built]
    |    3 modules
[74] ../node_modules/lodash-es/isTypedArray.js + 2 modules 3.19 KiB {0} [built]
    |    3 modules
[82] ./simulate/helpers.js 1.01 KiB {0} [built]
[143] ./store/index.js 142 bytes {0} [built]
[144] ./reducers/blog/appendNewPostToDom.js 1020 bytes {0} [built]
[145] ./reducers/blog/selectedPostsIds.js 1.07 KiB {0} [built]
[221] ./utils/registerServiceWorker.js 3.91 KiB {0} [built]
[469] ./index.js + 164 modules 501 KiB {0} [built]
    | ./containers/blog/removePostDialog.js 6.14 KiB [built]
    | ./index.js 426 bytes [built]
    | ./routes/index.js 1.81 KiB [built]
    | ./routes/router_callback.js 299 bytes [built]
    | ./containers/index.js 698 bytes [built]
    | ./containers/blog/inlinePost.js 6.49 KiB [built]
    | ./containers/blog/singlePost.js 5.44 KiB [built]
    | ./styles/global-styles.js 1.72 KiB [built]
    | ./containers/CounterContainer.js 4.06 KiB [built]
    | ./containers/blog/showBlog.js 5.7 KiB [built]
    | ./containers/blog/newPost.js 9.83 KiB [built]
    | ./containers/blog/blogProject.js 9.26 KiB [built]
    | ./containers/weather/weatherList.js 5.28 KiB [built]
    | ./containers/weather/searchBarContainer.js 4.22 KiB [built]
    | ./containers/BookDetailsContainer.js 2.89 KiB [built]
    |     + 150 hidden modules
[470] ./store/store.prod.js + 15 modules 41.4 KiB {0} [built]
    | ./store/store.prod.js 529 bytes [built]
    | ./reducers/index.js 947 bytes [built]
    | ./reducers/blog/postSaved.js 475 bytes [built]
    | ./reducers/counter.js 466 bytes [built]
    | ./reducers/bookSelected.js 392 bytes [built]
    | ./reducers/weather/fetchedWeather.js 1.2 KiB [built]
    | ./reducers/blog/fetchePost.js 447 bytes [built]
    | ./reducers/books.js 196 bytes [built]
    | ./reducers/blog/getRemovePostDialog.js 569 bytes [built]
    | ./reducers/blog/fetchedBlogs.js 530 bytes [built]
    |     + 6 hidden modules
    + 550 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
index-bundle.js (880 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (880 KiB)
    index-bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child html-webpack-plugin for "index.html":
    1 asset
    Entrypoint undefined = index.html
    [0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
        + 3 hidden modules
Done in 26.76s.

Answer 1

我通过使用resolve.alias解决了问题

在webpack.config.js中

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
require('dotenv').config();

console.log('OSAMA,',path.join(__dirname, "src"));
module.exports = {
context: path.join(__dirname, "src"),
entry: "./index.js",
output: {
    path: path.join(__dirname, "dist"),
    filename: "index-bundle.js"
},
resolve: {
    alias: {
    store:path.resolve(__dirname, 'src/store/'),
    actions:path.resolve(__dirname, 'src/actions/'),
    assets:path.resolve(__dirname, 'src/assets/'),
    components:path.resolve(__dirname, 'src/components/'),
    containers:path.resolve(__dirname, 'src/containers/'),
    constants:path.resolve(__dirname, 'src/constants/'),
    context:path.resolve(__dirname, 'src/context/'),
    selectors:path.resolve(__dirname, 'src/selectors/'),
    middlewares:path.resolve(__dirname, 'src/middlewares/'),
    reducers:path.resolve(__dirname, 'src/reducers/'),
    routes:path.resolve(__dirname, 'src/routes/'),
    simulate:path.resolve(__dirname, 'src/simulate/'),
    styles:path.resolve(__dirname, 'src/styles/'),
    tests:path.resolve(__dirname, 'src/tests/'),
    utils:path.resolve(__dirname, 'src/utils/'),
    }
},
module: {
    rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
    },
    {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
    }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
    template: "./../public/index.html"
    })
]
};

但是现在这会产生下一个错误

Hash: d1dcce3dbddfd7e67373                                                                                                             
Version: webpack 4.20.2                                                                                                                
Time: 1565ms                                                                                                                           
Built at: 2018-09-30 09:53:04                                                                                                          
1 asset                                                                                                                               
Entrypoint main = index-bundle.js                                                                                                      
[0] ./index.js 1.93 KiB {0} [built] [failed] [1 error]                                                                                 

ERROR in ./index.js                                                                                                                    
Module build failed (from ../node_modules/babel-loader/lib/index.js):                                                                  
ReferenceError: [BABEL] C:\ncourses\nodejs\ElectronWorks\Combine\src\index.js: Unknown option: .inherits. Check out https://babeljs.io/
docs/en/babel-core/#options for more information about options.                                                                        
    at throwUnknownError (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:123:11)   
    at Object.keys.forEach.key (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:107:
5)                                                                                                                                     
    at Array.forEach (<anonymous>)                                                                                                     
    at validateNested (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:83:21)       
    at validate (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:74:10)             
    at instantiatePreset (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:244:36)                 
    at cachedFunction (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\caching.js:33:19)                  
    at loadPresetDescriptor (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:235:45)              
    at config.presets.reduce (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:77:21)              
    at Array.reduce (<anonymous>)                                                                                                      
    at recurseDescriptors (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:74:38)                 
    at loadFullConfig (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:108:6)                     
    at process.nextTick (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\transform.js:28:33)                     
    at _combinedTickCallback (internal/process/next_tick.js:131:7)                                                                     
    at process._tickCallback (internal/process/next_tick.js:180:9)                                                                     
Child html-webpack-plugin for "index.html":                                                                                            
    1 asset                                                                                                                           
    Entrypoint undefined = index.html                                                                                                  
    [0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]                                    
        + 3 hidden modules                                                                                                             
error Command failed with exit code 2.                                                                                                 
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

与Babel

无法使用webpack构建React应用[导入问题[路径]]

3 个答案: