webpack-hot

1.运行命令npm install安装依赖包
2.运行命令npm i -g webpack-dev-server 安装服务插件
3.运行命令webpack-dev-server启动服务
4.打开浏览器,输入http://127.0.0.1:8080/
5.运行命令webpack,生成编译后的js文件。

`

依赖包文件package.json

 {
  "name": "webpack-demos",
  "version": "1.0.0",
  "description": "a collection of simple demos of Webpack",
  "main": "index.js",
  "keywords": [
    "build",
    "demo",
    "webpack"
  ],
  "author": "Will",
  "license": "MIT",
  "dependencies": {
"babel-core": "~6.0.20",
"babel-loader": "~6.0.1",
"babel-preset-es2015": "~6.0.15",
"babel-preset-react": "~6.0.15",
"bundle-loader": "^0.5.4",
"css-loader": "~0.16.0",
"file-loader": "~0.8.4",
"history": "^1.17.0",
"html-webpack-plugin": "2.x",
"jquery": "~2.1.4",
"jsx-loader": "~0.13.2",
"open-browser-webpack-plugin": "0.0.1",
"react": "~0.14.2",
"react-dom": "~0.14.2",
"react-router": "2.x",
"style-loader": "~0.12.3",
"url-loader": "~0.5.6",
"webpack": "~1.13.0",
"webpack-dev-server": "^1.14.0"
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {presets: ['es2015', 'react']},
      include: path.join(__dirname, '.')},
      {test: /\.less$/, loader: 'style!css!less' }
    ]
  }
};

你可能感兴趣的:(webpack-hot)