|____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.
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
Open the websitehttp://localhost:8080 and the chrome console show => hello world
Copy Code And npm i npm run dev
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.jsto the"serve"script.
By default, if the path to the config is not explicitly specified, webpack searches for the closestwebpack.config.js. If it cannot find one, it uses default values (./srcis the default"entry"in such case).
So Good!!!!!!!!!!!!!,I seem like a fool
Most helpful comment
Add
--config ./build/webpack.dev.jsto 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 (./srcis the default"entry"in such case).