zoukankan      html  css  js  c++  java
  • Webpack使用教程三(webpack-dev-server)

    Webpack给本地开发提供了一个可选的服务器webpack-dev-server。webpack-dev-server是一个很小的express应用,使用前需要用npm安装,它根据webpack.config.js文件中的选项构建。常见的选项如下:

    webpack-dev-server选项

    选项说明
    content-Base 默认情况下,webpack-dev-server会从项目的根目录提供文件,可以通过此选项设置文件的目录名
    port 服务器使用的端口,默认情况下为8080
    inline 设为true时可以在文件发生变化时,更新页面
    colors 设置终端输出字体颜色
    historyApiFallback 当设置为true时,访问所有服务器上不存在的文件,都会被重定向到/,也就是index.html文件

    下面我们通过简单的例子来学习webpack-dev-server的用法(代码下载)。项目目录和结构仍然与教程一中的基本一致,不同的是要增加一个webpack.config.js文件:

    module.exports = {
        devtool: 'eval-source-map',
        entry: __dirname + "/app/main.js",
        output: {
            path: __dirname + "/public",
            filename: "bundle.js"
        },
        devServer: {
            contentBase: "./public",  //以public为根目录提供文件
            colors: true,
            historyApiFallback: true,
            inline: true
        }
    };

      

    然后运行webpack-dev-server命令,顺利启动服务器后,在浏览器中输入http://localhost:8080/index.html就可以看到页面了。代码下载

  • 相关阅读:
    NABCD项目分析
    第七周学习进度
    第六周学习进度
    构建之法阅读笔记03
    [算法] 求x的n次方的一种for循环实现
    [算法]分解质因数
    通过索引操作数组
    [swift入门] 数据类型
    二叉排序树 常用函数小结
    剑指 Offer 54. 二叉搜索树的第k大节点 做题小结
  • 原文地址:https://www.cnblogs.com/xfshen/p/5941127.html
Copyright © 2011-2022 走看看