阅读 3751
webpack-dev-server 使用方法,看完还不会的来找我~

webpack-dev-server 使用方法,看完还不会的来找我~

记录下webpack-dev-server的用法.

首先,我们来看看基本的webpack.config.js的写法

    module.exports = {
        entry: './src/js/index.js',
        output: {
            path: './dist/js',
            filename: 'bundle.js'
        }
    }复制代码

配置文件提供一个入口和一个出口,webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包,输出新bundle.js文件,这样文件多了之后打包速度会很慢,此外这样的打包的方式不能做到hot replace,即每次webpack编译之后,你还需要手动刷新浏览器。

webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用expressHttp服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器client使用了websocket通讯协议,原始文件作出改动后,webpack-dev-server会实时的编译,但是最后的编译的文件并没有输出到目标文件夹,即上面配置的:

    output: {
        path: './dist/js',
        filename: 'bundle.js'
    }复制代码

注意:你启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

下面来结合webpack的文档和webpack-dev-server里部分源码来说明下如何使用:

启动

启动webpack-dev-server有2种方式:

配置

我主要讲解下cmd line的形式,Node.js API形式大家去看下官方文档。可通过npm script进行启动。我的目录结构是:

    app
    |__dist
    |   |__styles
    |   |__js
    |       |__bundle.js
    |   |__index.html
    |__src
    |   |__styles
    |   |__js
    |       |__index.js
    |__node_modules
    |__package.json
    |__webpack.config.js复制代码

content-base

设定webpack-dev-server伺服的directory。如果不进行设定的话,默认是在当前目录下。

webpack-dev-server --content-base ./dist
复制代码

这个时候还要注意的一点就是在webpack.config.js文件里面,如果配置了outputpublicPath这个字段的值的话,在index.html文件里面也应该做出调整。因为webpack-dev-server伺服的文件是相对publicPath这个路径的。因此,如果你的webpack.config.js配置成这样的:

    module.exports = {
        entry: './src/js/index.js',
        output: {
            path: './dist/js',
            filename: 'bundle.js',
            publicPath: '/assets/'
        }
    }复制代码

那么,在index.html文件当中引入的路径也发生相应的变化:

    
    
    
        
        Demo
    
    
        复制代码
文章分类
前端
文章标签