webpack 之(8) webpack.config.js配置 之 devServer(热更新)

 

注意:很可惜,页面一直在加载中,没成功,目前在做webpack之(9)的时候问题已经进行分析 

常见的问题:

   需要优先安装一下包

       npm i webpack-dev-server -D

       但是发现项目根本无法运行而报错,具体看报错问题

       npm i webpack  -D

       npm i webpack-cli@3.3.12

  报错问题:

       Error: Cannot find module 'webpack-cli/bin/config-yargs' 

       解决办法:因为webpack-cli版本的问题

      如果你找不到与webpack-dev-server兼容的webpack-cli版本号，可以去node_modules 中的webpack-dev-server/bin/webpack-dev-server.js代码中寻找webpack-dev-server依赖webpack-cli的版本号。

    如何启动:

 第一种:

    在package.json中添加一句: webpack serve --open chorme.exe

    然后执行 npm run start

 

  第二种

    需要通过 npx webpack-dev-server 

const {resolve} =  require('path')
const HtmlWebPackPlugin  = require('html-webpack-plugin')
const FileLoader = require('file-loader')
module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      //打包其他资源(除了html/js/css资源外的资源)
      {
        //排除一下资源,其他资源进行打包
        exclude:/\.(css|js|html)$/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebPackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development',
  /* 
  开发服务器 devServer:用来自动化(自动编译,自动打开浏览器刷新浏览器)
   */
  devServer:{
    contentBase:resolve(__dirname,'build'),
    //开启gzip压缩
    compress:true,
    //端口
    port:3000,
    //自动打开浏览器
    open: true

  }
}