webpack serve 正常启动但没效果

1、项目根目录打开cmd安装 webpack-dev-server

npm install webpack-dev-server -D

是最新版本

2、新建并配置webpack.config.js

// 导入 node.js 中专门操作路径的模块
const path = require('path')

// 使用 Node.js 中的导出语法，向外导出一个webpack的配置对象
module.exports = {
   // 代表 webpack运行的模式，可选值有两个 development (开发时用，打包快，体积大）和 production（生产时用，打包慢，体积小）
   mode: 'development',
   // entry:''指定要处理哪个文件' 打包入口文件路径
   entry: path.join(__dirname, './src/index.js'),
   //指定生成的文件要存放到哪里
   output: {
       // 存放目录 输出文件的存放路径
       path: path.join(__dirname, './dist'),
       // 生成的文件名
       filename: 'bundle.js'
   },
   devServer: {
       static: "./src" // 修改默认打开目录 原来的是public目录
   }
}

3、在package.json中配置

4、然后 npm run dev，服务器正常启动。打开网址发现Cannot get/

保存修改index.js终端有反应

但是打开网页却发现index.js的修改对网页没有效果。

//导入jquery包
import $ from 'jquery'
$(function(){
 $('li:odd').css('background-color','pink')
 $('li:even').css('background-color','yellow')//颜色更改发现网页没任何变化
})

5、原因：你启动webpack serve 后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack serve 进行开发的时候都看不到编译后的文件

6、解决：

在html文件中直接script src"地址端口/文件"

或者