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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。