使用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:

    }//  配置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

　　执行成功

巴特西

使用webpack构建本地服务器

最新文章

热门文章