Webpack-dev-server: Didn't get the same feedback as the Webpack's guides

Created on 26 Nov 2020  ·  6Comments  ·  Source: webpack/webpack-dev-server

  • Operating System:MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
  • Node Version: v12.19.0
  • NPM Version: 6.14.8
  • webpack Version: webpack 5.6.0 webpack-cli 4.2.0
  • webpack-dev-server Version: 3.11.0
  • Browser: Chrome
  • [x] This is a bug
  • [ ] This is a modification request

Code

|____package-lock.json
|____package.json
|____build
| |____webpack.dev.js
|____src
| |____entry.js
// webpack.dev.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const dev = {
    mode: 'development',
    entry: {
        main: path.resolve(__dirname, '../', 'src','entry.js')
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, '../', 'dist'),
    },
    devServer: {
        contentBase:path.resolve(__dirname, '../', 'dist'),
        hot: true,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Document',
        }),
    ],
};

module.exports = (env) =>{
    return dev
}
//  /src/entry.js
console.log('hello world')
{
  "name": "wenpack-self",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/webpack.dev.js",
    "serve": "webpack serve",
    "dev": "npm run serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "csv-loader": "^3.0.3",
    "html-webpack-plugin": "^4.5.0",
    "json5": "^2.1.3",
    "style-loader": "^2.0.0",
    "toml": "^3.0.0",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "xml-loader": "^1.2.1",
    "yamljs": "^0.3.0"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "material-design-icons": "^3.0.1",
    "vue": "^2.6.12"
  }
}
// mac cmd print when i use npm run dev
> webpack serve

ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from undefined
ℹ 「wds」: Content not from webpack is served from /Users/v_shenyuhan/Desktop/bbbb/wenpack-self
✖ 「wdm」: assets by status 146 KiB [cached] 1 asset
runtime modules 430 bytes 3 modules
cacheable modules 330 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 57.9 KiB 4 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
  modules by path ./node_modules/webpack/hot/*.js 1.42 KiB
    ./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/v_s/Desktop/bbbb/wenpack-self'

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/v_s/Desktop/bbbb/wenpack-self'

webpack 5.6.0 compiled with 2 errors in 3296 ms
ℹ 「wdm」: Failed to compile.

Expected Behavior

I'm learning to use WebPack Webpack's guides
I use npm run dev
Although the static resource server was started on port 8080(http://localhost:8080), the code did not compile and webpack-dev-server did not feel the effect. It was just a static resource server.

It's right work to use npm run build,so I don't understand why cmd pop an error(Module not found: Error: Can't resolve './src' in '/Users/v_s/Desktop/bbbb/wenpack-self') when i use npm run dev

Actual Behavior

Open the websitehttp://localhost:8080 and the chrome console show => hello world

For Bugs; How can we reproduce the behavior?

Copy Code And npm i npm run dev

Most helpful comment

Add --config ./build/webpack.dev.js to the "serve" script.
By default, if the path to the config is not explicitly specified, webpack searches for the closest webpack.config.js. If it cannot find one, it uses default values (./src is the default "entry" in such case).

All 6 comments

You have invalid path for entry, please debug this value

You have invalid path for entry, please debug this value

But npm run build is right work , I don't understand why the path is wrong

console.log(path.resolve(__dirname, '../', 'src','entry.js'));

when npm run build

> [email protected] build /Users/v_shenyuhan/Desktop/bbbb/wenpack-self
> webpack --config ./build/webpack.dev.js
// --------------  I  SEE Consoel.log------------------------------------------
/Users/v_shenyuhan/Desktop/bbbb/wenpack-self/src/entry.js
(node:87498) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
[webpack-cli] Compilation finished
asset main.64ef3ca59b1fada7e919.js 906 bytes [emitted] [immutable] (name: main)
asset index.html 243 bytes [emitted]
./src/entry.js 64 bytes [built] [code generated]
webpack 5.6.0 compiled successfully in 163 ms

when npm run dev
i don't look for console.log

[email protected] dev /Users/v_shenyuhan/Desktop/bbbb/wenpack-self
> npm run serve


> [email protected] serve /Users/v_shenyuhan/Desktop/bbbb/wenpack-self
> webpack serve

ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from undefined
ℹ 「wds」: Content not from webpack is served from /Users/v_shenyuhan/Desktop/bbbb/wenpack-self
✖ 「wdm」: assets by status 146 KiB [cached] 1 asset
runtime modules 430 bytes 3 modules
cacheable modules 330 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 57.9 KiB 4 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
  modules by path ./node_modules/webpack/hot/*.js 1.42 KiB
    ./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/v_shenyuhan/Desktop/bbbb/wenpack-self'

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/v_shenyuhan/Desktop/bbbb/wenpack-self'

webpack 5.6.0 compiled with 2 errors in 4528 ms
ℹ 「wdm」: Failed to compile.
// webpack.dev.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

console.log(path.resolve(__dirname, '../', 'src','entry.js'));
const dev = {
    mode: 'development',
    entry: {
        main: path.resolve(__dirname, '../', 'src','entry.js')
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, '../', 'dist'),
    },
    devServer: {
        contentBase:path.resolve(__dirname, '../', 'dist'),
        hot: true,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Document',
        }),
    ],
};

module.exports = (env) =>{
    return dev
}

Add --config ./build/webpack.dev.js to the "serve" script.
By default, if the path to the config is not explicitly specified, webpack searches for the closest webpack.config.js. If it cannot find one, it uses default values (./src is the default "entry" in such case).

Add --config ./build/webpack.dev.js to the "serve" script.
By default, if the path to the config is not explicitly specified, webpack searches for the closest webpack.config.js. If it cannot find one, it uses default values (./src is the default "entry" in such case).

So Good!!!!!!!!!!!!!,I seem like a fool

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wojtekmaj picture wojtekmaj  ·  3Comments

hnqlvs picture hnqlvs  ·  3Comments

piotrszaredko picture piotrszaredko  ·  3Comments

daryn-k picture daryn-k  ·  3Comments

da2018 picture da2018  ·  3Comments