今天学习webpack时,按网上教程配置自动打包工具,但是出现问题,在自动打包成功后,在页面居然渲染不了效果,访问bundle.js也是访问不到
const path = require('path') // 导入 node.js 中专门操作路径的模块
module.exports = {
mode: 'development', // mode 用来指定构建模式
entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), // 输出文件的存放路径
filename: 'bundle.js', // 输出文件的名称
// devServer: {
// static: '../2.webpack'
// }
}
}
[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:8081/
[webpack-dev-server] On Your Network (IPv4): http://192.168.133.158:8081/
[webpack-dev-server] On Your Network (IPv6): http://[fe80::f13d:e94:a0e2:aaba]:8081/
[webpack-dev-server] Content not from webpack is served from 'D:\前端第一章\05-阶段五:Vue.js项目实战开发\05-阶段五:Vue.js项目实战开发\01-Vue第一章--第六
章资料\阶段五:Vue.js项目实战资料\Vue\Vue\vue电商\2.vue-前端工程化\text\public' directory
asset bundle.js 559 KiB [emitted] (name: main)
runtime modules 27.3 KiB 12 modules
modules by path ./node_modules/ 438 KiB
modules by path ./node_modules/webpack-dev-server/client/ 52.4 KiB 12 modules
modules by path ./node_modules/webpack/hot/.js 4.3 KiB
./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated]
./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
+ 2 modules
modules by path ./node_modules/html-entities/lib/.js 81.3 KiB
./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
+ 2 modules
./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/index.js 143 bytes [built] [code generated]
webpack 5.72.0 compiled successfully in 1496 ms
我尝试过许多方法,重新配置了n遍,但是没有效果,求各位看一下问题
看一下你全部的webpack.config.js文件和你的入口文件
因为你这个配置了webpack-dev-serve
启动了服务, 把mode的值修改为production就可以了
module.exports = {
mode: "production",
// ...
}