zoukankan      html  css  js  c++  java
  • 使用webpack构建本地服务器

      想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖。

      1、安装webpack-dev-server

       配置好后执行 webpack-dev-server,这时候会报错。需要在package.json加上服务器信息。

      2、在package.json中的scripts对象中添加如下命令,用以开启本地服务器

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "start": "webpack",
        "server": "webpack-dev-server --open"
      },

      3、下载好之后需要在webpack.config.js里面配置下devServer

    const path = require('path');
    module.exports={
        //入口文件的配置项
        entry:{
            entry:'./src/index.js'
        },
        //出口文件的配置项
        output:{
            //输出的路径,用了Node语法
            path:path.resolve(__dirname,'dist'),
            //输出的文件名称
            filename:'bundle.js'
        },
        mode:"development",
        //模块:例如解读CSS,图片如何转换,压缩
        module:{},
        //插件,用于生产模版和各项功能
        plugins:[],
        //配置webpack开发服务功能
        devServer:{
            contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
            host:'192.168.118.221',
            compress:true,
            port:8081
        }//  配置webpack服务
    }

      host是你自己的ip地址,port是端口号

      devserver作为webpack配置选项中的一项,以下是它的一些配置选项

    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      } 

      4、配置好后,在终端执行npm run server,发现还是会报错。如下图所示,webpack-cli没有安装

      5、安装webpack-cli:

      注意:需要全局和局部都安装。先npm install webpack-cli -g,再npm install webpack-cli -D,否则的话,依然会报上面的错误。

      6、执行npm run server

      执行成功

  • 相关阅读:
    JTAG各类接口针脚定义及含义
    【转载】关于quartus ii软件中注释乱码问题的解决方法
    【转载】浅谈阻塞和非阻塞语句的本质区别
    labview事件结构学习
    Labview按钮的机械动作
    LabVIEW中数组的自动索引
    opencv实例三:播放AVI格式视频
    TensorRT 不支持Tensorflow的操作有如下
    深度学习模型stacking模型融合python代码,看了你就会使
    sklearn的K折交叉验证函数KFold使用
  • 原文地址:https://www.cnblogs.com/goloving/p/8652937.html
Copyright © 2011-2022 走看看