webpack 学习笔记(二)

如果我想调试的话,不可能每一次都打webpack,打个包,然后打开demo再去看效果吧,所以就有了 webpack-dev-server 这个东西

简介

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

安装

和webpack一样

//全局安装webpack-dev-server
cnpm install -g webpack-dev-server
//安装到你的项目目录
cnpm install --save-dev webpack-dev-server

配置

修改目录下的webpack.config.js文件,另存为webpack.dev.js

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/src/home.js", //入口文件
    output: {
        path: __dirname + "/demo/build", //输出目录
        publicPath:'/build/',//包热更新的地址
        filename: "home.js" //输出的文件名
    },
    devServer: {
        contentBase: __dirname + "/demo", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    }
}

开启

我们可以在package.json的script中添加一个新的命令dev

 "scripts": {
    "test": "test",
    "start": "webpack",
    "dev": "webpack-dev-server --config webpack.dev.js --open"
  }

之后运行,就会打开一个网页,当你保存你所写的代码的时候,网页就会自动刷新

npm run dev