当前位置:首页 > 博客 >Javascript > 正文

webpack构建项目实现自动刷新问题?

时间:2017-03-27 09:32   作者:admin   点击:

一、webpack构建项目

  1. 什么是webpack?

    webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。

  2. 为什么使用webpack?


    今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

    a:模块化,让我们可以把复杂的程序细化为小的文件;

    b:类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;

    c:scss,less等CSS预处理器

    .........

    这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

  3. 安装webpack

   首先需要确认你安装nodeJs、npm(cnpm),然后再运行下面的命令安装webpack 以及 webpack-dev-server 

npm install webpack --save --dev
npm install webpack-dev-server --save --dev


二、使用webpack


 创建webpack.config.js文件。内容为:

var path = require("path");
module.exports = {
  context:__dirname ,
  entry: [
  'webpack-dev-server/client?http://127.0.0.1:8080, //这是实现inline模式 自动刷新的必要条件 
  './src/js/index.js'
      ],
  module:{
  loaders:[{
  test:/\.js?$/,
  exclude:/(node_modules)/,
  loader:"babel-loader",
  query:{
  presets:["es2015","react"]
  }
  }]
  },
  devServer:{inline:true},
  output: {
    path: path.resolve(__dirname, "dist"),
    //publicPath: "/assets/",
    filename: "all.js"
  }
};

webpack自动刷新有两种模式,一种是iframe 还有就是 inline ,如果是iframe 就是在你访问地址:http://域名/webpack-dev-server/文件名

如果是inline 就必须必须加

webpack-dev-server/client?http://127.0.0.1:8080'

这句话,我只是知道他的原理是利用socket,实现持久链接,来通知浏览器刷新,

但是官网不是这样说的,说的只要在你的命令中或者在配置文件中加--inline参数就可以了,但是我试了很多次,都不行,最后发现加上这句话就可以,暂时不知道为什么?为啥官网的不行,不知道是不是版本问题,但是我试了1.x版和2.x 版都不行,记录哈这个疑惑?


暂时记录这些,后期如果有问题 再添加!

文档地址:

webpack中文文档

webpack官网