webpack-dev-server 找不到目录

2024-02-16 21:32:22

在前端开发过程中，使用webpack工具对项目进行打包整合，但是在开发阶段每次代码在更新之后，都去执行一次webpack打包，实在是有些麻烦，所以就有了 webpack-dev-server ， webpack-dev-server 其实是小型的静态文件服务器，在我们更新代码后可以自动更新并且浏览。在使用 webpack 5之后，每次自动更新产生的url 地址都不对，不是项目的入口。

PS D:\phpStudy\PHPTutorial\WWW\wp> webpack -v
webpack: 5.64.2
webpack-cli: 4.9.1
webpack-dev-server 4.5.0

这是webpack ,webpack-cli,webpack-dev-server的版本信息。

webpack.config.js 这个是 webpack 的配置文件，放在项目的根目录中

const path=require('path')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js',
    },
    mode:'development',
}

　　使用webpack-dev-server 自动更新的话，要在 package.json 配置中进行设置，找到 scripts:{} 设置项

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server", // 设置这一项
    "build": "webpack --mode production"
  },

　　在配置文件设置好之后，执行webpack

PS D:\phpStudy\PHPTutorial\WWW\wp> webpack
asset bundle.js 323 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 282 KiB
  ./src/main.js 202 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
webpack 5.64.2 compiled successfully in 268 ms

　　然后再执行 npm run dev

PS D:\phpStudy\PHPTutorial\WWW\wp> npm run dev

> wp@1.0.0 dev
> webpack-dev-server --open --port 3000

系统找不到指定的文件。
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.101.8:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\phpStudy\PHPTutorial\WWW\wp\public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
runtime modules 26.3 KiB 13 modules
modules by path ./node_modules/ 481 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 52.6 KiB 12 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
    ./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]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/main.js 202 bytes [built] [code generated]
webpack 5.64.2 compiled successfully in 758 ms

　　但这时打开浏览器地址却不是项目的入口 http://localhost:3000/

看了webpack 5的文档，需要在配置中修改设置

const path=require('path')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js',
    },
    devServer:{
        static:{
            directory: path.join(__dirname,'src'),　　// 这里指定入口位置
        },
        port:9000,
        compress: true,
        open: true,
        hot: true
    },
    mode:'development',
}

　　还有就是 webpack 会把打包好的 bundle.js 文件存储在内存中一份，相对于硬盘的读写生成，显然内存的速度更快，可以通过url 的根路径进行访问 http://localhost:3000/bundle.js ，所以在你的 html 文件中可以这样引用

<script type="text/javascript" src="/bundle.js"></script> 这样的形式去引用，

PS： webpack-dev-server 要安装在项目的路径，不要全局这样： npm i webpack-dev-server -D

码农公寓

相关文章