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

      执行成功

  • 相关阅读:
    mysql的安装、启动和基础配置 —— windows版本
    Navicat安装及简单使用
    期货黄金与现货黄金比较
    android 网络编程--socket tcp/ip udp http之间的关系
    socket、tcp、udp、http 的认识及区别
    Android数据传递的五种方法汇总
    android 应用程序Activity之间数据传递与共享的几种途径
    Android数据存储的五种方法汇总
    Android终端与服务器数据传输解决方案
    转载 解决Android与服务器交互大容量数据问题
  • 原文地址:https://www.cnblogs.com/goloving/p/8652937.html
Copyright © 2011-2022 走看看