Webpack2 入門(5)

Webpack2 入門(5)

主要參考官網 Getting Started

本篇內容延續 Webpack2 入門(2)

本篇主要介紹:如何利用 webpack 建立一個開發用的 server

webpack-dev-server

webpack-dev-server 設定

npm install –save-dev webpack-dev-server

在這裡我們利用 Node.js API 執行 dev-server (See here),因此我們就不需在 webpack.config.js 這裡設定 dev-server

建立一個 server.js

server.js

const Webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");
const webpackConfig = require("./webpack.config");

const compiler = Webpack(webpackConfig);
const server = new WebpackDevServer(compiler, {
    stats: {
        colors: true
    }
});

server.listen(8080, "127.0.0.1", function() {
    console.log("Starting server on http://localhost:8080");
});

package.json 加入這段

package.json

{
  ...
  "scripts": {
    "build": "webpack",
    "dev": "node server.js"
  },
  ...
}

執行

$ npm run dev

接下來我們就可以順利連線 http://localhost:8080/

參考

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s