webpack webpack-dev-server使用指南

時間 2019-12-04

標籤 webpack dev server 使用指南简体版

原文原文鏈接

webpack-dev-server插件能夠實現webpack的自動編譯刷新javascript

項目結構

pockage.js

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "測試webpack",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --config webpack.config.js"
  },
  "author": "zouqin",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

var path = require("path");
module.exports = {
  entry: {
    app: ['./app/main.js']
  },
  output: {
    path: path.resolve('./', "build"),
    publicPath: "build",
    filename: "bundle.js"
  }
};

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="build/bundle.js"></script>
    </head>
    <body>
        <h1>測試！測試！測試！測試！測試！測試！</h1>
    </body>
</html>

相關標籤/搜索