爱编码的Farmer

  • 主页
  • 编程开发
  • 运营维护
  • 随心笔记
  • 留言页面
  • 打赏
爱编码的Farmer
我是Farmer,我为自己代言
  1. 首页
  2. 编程开发
  3. 教程笔记
  4. 正文

webpack 学习笔记(二)

2018年1月14日 4374点热度 0人点赞 0条评论

如果我想调试的话,不可能每一次都打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
标签: 暂无
最后更新:2018年4月6日

Farmer

不敢说什么

点赞
< 上一篇
下一篇 >

文章评论

取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

COPYRIGHT © 2021 icodef.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

湘ICP备19008073号