webpack错误无法解决“ ./src”

Question

I am new to webpack. 我是webpack的新手。 I am learning react and building environment for it using webpack. 我正在学习使用webpack反应并为其构建环境。

I have webpack-config.js 我有webpack-config.js

var path = require('path');


module.exports = {
    mode: 'production',
    entry: './script.js',
    output: 
    {
        path: path.resolve(__dirname, 'src'),
        filename: 'transpiled.js'
    },
    module: 
    {
        loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query:
            {
                presets: ['es2015','react']
            }
        }
        ]
    }
}

and script.js 和script.js

    import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello world</h1>    
    document.getElementByIdName('first')
);

and index.html 和index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="first"></div>
    <script src="transpiled.js"></script>
</body>
</html>

in Pakage.json file I have written 在我写的Pakage.json文件中

"scripts": {
    "it": "webpack-dev-server --hot" 
  },

But when i run the npm with "npm run it" , it shows me the error of 但是当我使用“ npm run it”运行npm时，它显示了以下错误

WARNING in configuration The 'mode' option has not been set. 配置中的警告尚未设置“模式”选项。 Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 将“模式”选项设置为“开发”或“生产”以启用该环境的默认设置。 ERROR in multi -dev-derver/client? 多-dev-derver /客户端中的错误？ http://localhost:8080 webpack/hot/dev-server ./src Module not found: Error : Cant resolve './src' in D:\\React Js \\LearnReact' @multi -dev-derver/client? http：// localhost：8080 webpack / hot / dev-server ./src找不到模块：错误：无法在D：\\ React Js \\ LearnReact'@multi -dev-derver / client中解析'./src'吗？ http://localhost:8080 webpack/hot/dev-server ./src i ?wdm?: failed to Compile. http：// localhost：8080 webpack / hot / dev-server ./src i？wdm ?：编译失败。

Please help me i am really stuck and want to know the solution. 请帮助我，我真的很困惑，想知道解决方案。

Answer 1

You need to add pass the --config option to webpack-dev-server : 您需要将--config选项传递给webpack-dev-server ：

webpack-dev-server --config path/to/webpack.config.js

Also set your mode to development in your base config, you can overwrite it later when you do a production build. 还要在基本配置中将模式设置为development模式，稍后在进行生产构建时可以覆盖它。

Also ensure that your ./script.js file is in the root of your project, ie next to your package.json since this file path is relative to the npm script execution. 还要确保您的./script.js文件位于项目的根目录下，即package.json旁边，因为该文件路径与npm脚本执行有关。

Based on this configuration --> path: path.resolve(__dirname, 'src') all your built assets will end up in a src folder in the root of your project, assuming that is where your webpack.config.js file is (this path is relative to your config file). 根据此配置-> path: path.resolve(__dirname, 'src') ，假设您的webpack.config.js文件位于（ webpack.config.js目录下，则所有已构建资产最终都将位于项目根目录下的src文件夹中。此路径相对于您的配置文件）。 The actual folder will only be generated in production , in development assets are stored in memory. 实际的文件夹仅在production中生成，在development资产中存储在内存中。

You might also want to set a publicPath : 您可能还需要设置publicPath ：

output: {
  ...
  publicPath: '/'
}

I would also recommend using the html-webpack-plugin since this can resolve the correct paths to your js file for you. 我还建议您使用html-webpack-plugin因为这样可以为您解析js文件的正确路径。

var HtmlWebpackPlugin = require('html-webpack-plugin');

...
plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html', // name of file that will be outputted to 'src' when built
    template: // path to your html file relative to config
    inject: true
  })
]

Then you don't have to include the path to your script, so your html file would look like: 然后，您不必包括脚本的路径，因此您的html文件如下所示：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="first"></div>
</body>
</html>

webpack错误无法解决“ ./src”

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-06-25 08:29:55

webpack错误无法解决“ ./src”

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-06-25 08:29:55

解决方案1
0 已采纳 2018-06-25 08:29:55