webpack-dev-server完整demo

时间 2019-11-08

标签 webpack dev server 完整 demo 繁體版

原文原文链接

node.js版本: 8.1.3
npm版本: 5.0.3
webpack版本: 3.1.0
目录结构：javascript

dev/index.jsxhtml

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            info: this.props.info
        };
    }
    render() {
        return (
            <div>
                <div>{this.state.info.name}</div>
                <div>{this.state.info.age}</div>
                <div>{this.state.info.think}</div>
                <div>{this.state.info.height}</div>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
    <HelloWorld
        info={{
        name: 'Leslie',
        age: '18',
        height: 185
    }}></HelloWorld>
</div>, document.getElementById('container'))

index.htmljava

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src="output/index.js"></script>
</body>

</html>

package.jsonnode

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --progress --colors --host localhost --port 8888 --inline --hot",
    "start:prod": "webpack && node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.1.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.5.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

server.jsreact

var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");

// 在入口文件数组中添加两个选项
// webpack-dev-server/client?http://localhost:8888
// webpack/hot/dev-server
config
  .entry
  .index
  .unshift('webpack-dev-server/client?http://localhost:8888', 'webpack/hot/dev-server');

  // 合并一个 devServer到配置文件
Object.assign(config, {
  devServer: {
    hot: true,
    inline: true
  }
})

// 编译
var compiler = webpack(config);

// 初始化一个webpack-dev-server
new webpackDevServer(compiler, {
    publicPath: config.output.publicPath,
    historyApiFallback: false,
    stats: {
      colors: true
    }
  }).listen(8888, 'localhost', function (error) {
  if (error) {
    console.error(error);
  }
});

webpack.config.jswebpack

// 引入模块
var webpack = require('webpack');
var path = require('path');

// 解析目录地址
var DEV = path.resolve(__dirname, 'dev'); // dev目录
var OUTPUT = path.resolve(__dirname, 'output'); // output目录

// 配置
var config = {
    entry: {
        index: [DEV + '/index.jsx'] // 入口配置，支持 string|object|array，具体参考 https://doc.webpack-china.org/configuration/
    },
    output: {
        // webpack 如何输出结果的相关选项

        path: OUTPUT,
        // 全部输出文件的目标路径
        // 必须是绝对路径（使用 Node.js 的 path 模块）

        filename: '[name].js',

        chunkFilename: (new Date()).getTime() + '[id].chunk.js',
        // 「入口分块(entry chunk)」的文件名模板

        publicPath: '/output/'
        // 输出解析文件的目录，url 相对于 HTML 页面
    },
    module: {

        // 加载器
        loaders: [
            {
                include: DEV,
                loader: 'babel-loader'
            }
        ]
    },

    // 插件
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

module.exports = config;

说明：web

一、根据"目录结构"图（最上面目录结构图）创建项目，分别创建文件，
二、在项目根目录下打开命令行窗口(win + r, 输入cmd 或者 在项目目录按住shift键同时按鼠标右键，选择“在此处打开命令窗口”) 
三、在命令行窗口输入：npm install (国内用 cnpm install) 下载依赖模块
四、下载完依赖模块，在命令行窗口中输入：npm start 或者 node server.js 启动 webpack-dev-server服务器
五、在浏览器中输入 http://localhost:8888 打开页面

备注：chrome

一、这个demo支持webpack-dev-server inline模式下命令行运行(npm start) 和 node API运行(node server.js)，而且两种使用方式下的自动刷新和热模块替换npm