使用 webpack 与 webpack-dev-server 的运行区别,及如何解决页面提示的 ‘CNNOT GET/‘ 的原因

1、使用 webpack 与 webpack-dev-server 的运行区别:

A、webpack 运行后的文件一般是自动建立 ‘dist’ 下的 ‘bundle.js’ 中;(此时的 ‘bundle.js’ 命名一般是:‘filename’ 中的自动设定的名字);

然后,index.html 文件就能在本地浏览器打开,然后就能看到 style 等信息的显示;

B、webpack-dev-server 运行后的文件一般是有 ip 的,且其命名的 bundle.js 文件 (此时的 ‘bundle.js’ 命名一般是:‘filename’ 中的自动设定的名字);在文件夹中是不显示的,因为其自动放在了缓存中的根目录下;

然后此时是不能直接在本地浏览器中打开的;(即:就算打开其style 也显示不出来);
此时就需要访问服务器的地址或通过 ip 来访问页面;

2、解决页面提示的 ‘CNNOT GET/’ 的原因:

A、在 ‘webpack.config.js’ 查看一下是否有 ‘plugins’ 等插件信息,若无插件信息出现的问题就很可能是插件的问题;
B、若 ‘plugins’ 插件没有问题,就看一下引入的模板是不是 ‘index.html’ 文件,不能随便换名字,因为网站默认寻找路径是 index.html 其他名字的 html 服务器是不会找到的;

new HtmlWebpackPlugin({
    
    
	template:'./index.html', // 模板文件
	filename:'index.html'
}),

3、小结:

哪里有不对或不合适的地方,还请大佬们多多指点和交流!

猜你喜欢

转载自blog.csdn.net/weixin_43405300/article/details/120675452