Ошибка webpack не может быть решена ./src - PullRequest
Новая
       21

Ошибка webpack не может быть решена ./src

0 голосов
/ 25 июня 2018

Я новичок в вебпаке. Я учусь реагировать и создаю для него среду, используя веб-пакет.

У меня есть 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']
            }
        }
        ]
    }
}

и script.js 

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

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

и index.html 

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

в файле Pakage.json, который я написал 

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

Но когда я запускаю npm с "npm run it" , он показывает мне ошибку

ВНИМАНИЕ в конфигурации Опция 'mode' не была установлена. Установите для параметра «mode» значение «development» или «production», чтобы включить значения по умолчанию для этой среды. ОШИБКА в multi -dev-derver / client? http://localhost:8080 webpack / hot / dev-server ./src Модуль не найден: Ошибка: Не удается разрешить './src' в D: \ React Js \ LearnReact '@multi -dev-derver / client? http://localhost:8080 webpack / hot / dev-server ./src i? wdm ?: не удалось скомпилировать.

Пожалуйста, помогите мне, я действительно застрял и хочу знать решение.

1 Ответ

0 голосов
/ 25 июня 2018

Вам нужно добавить параметр --config для webpack-dev-server:

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

Также установите свой режим на development в базовой конфигурации, вы можете перезаписать егопозже, когда вы делаете производственную сборку.

Также убедитесь, что ваш файл ./script.js находится в корне вашего проекта, т.е. рядом с вашим package.json, поскольку этот путь к файлу относится к выполнению сценария npm.

На основев этой конфигурации -> path: path.resolve(__dirname, 'src') все ваши встроенные ресурсы окажутся в папке src в корне вашего проекта, при условии, что именно там находится ваш файл webpack.config.js (этот путь относительно вашего файла конфигурации).Фактическая папка будет сгенерирована только в production, в development активы хранятся в памяти.

Вы также можете установить publicPath: 

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

Я бытакже рекомендуем использовать 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
  })
]

Тогда вам не нужно указывать путь к вашему скрипту, чтобы ваш html-файл выглядел таккак: 

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