htmlwebpackplugin is not defined

webpack.config.js

const path = require('path');

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); //精簡輸出

module.exports = {

? ? mode: 'development',

? ? entry: {

? ? ? ? app: './src/index.js',

? ? },

? ? devtool: 'inline-source-map', //提供了 source map 功能，將編譯后的代碼映射回原始源代碼 我們使用 inline-source-map 選項，這有助于解釋說明我們的目的（僅解釋說明，不要用于生產環(huán)境）

? ? devServer: {

? ? ? ? contentBase: 'static', //配置告知 webpack-dev-server，在 localhost:8080 下建立服務，將 dist 目錄下的文件，作為可訪問文件。

? ? ? ? hot: true

? ? },

? ? plugins: [

? ? ? ? // new CleanWebpackPlugin(['dist']),

? ? ? ? new HtmlWebpackPlugin({

? ? ? ? ? ? title: 'Output Management',

? ? ? ? ? ? template: path.join(__dirname, '/static/index.html'),

? ? ? ? ? ? inject: 'body',

? ? ? ? ? ? filename: 'index.html'

? ? ? ? }),

? ? ? ? new webpack.NamedModulesPlugin(),

? ? ? ? new webpack.HotModuleReplacementPlugin(),

? ? ? ? new UglifyJSPlugin(),

? ? ],

? ? output: {

? ? ? ? filename: '[name].bundle.js',

? ? ? ? path: path.resolve(__dirname, 'dist'),

? ? ? ? publicPath: '/' //publicPath 也會在服務器腳本用到，以確保文件資源能夠在 http://localhost:3000 下正確訪問，我們稍后再設置端口號

? ? },

? ? module: {

? ? ? ? rules: [{

? ? ? ? ? ? test: /\.js$/,

? ? ? ? ? ? exclude: /(node_modules|bower_components)/,

? ? ? ? ? ? use: {

? ? ? ? ? ? ? ? loader: 'babel-loader',

? ? ? ? ? ? ? ? options: {

? ? ? ? ? ? ? ? ? ? presets: ['react', 'es2015']

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }, {

? ? ? ? ? ? test: /\.less$/,

? ? ? ? ? ? use: [{

? ? ? ? ? ? ? ? loader: "style-loader" // creates style nodes from JS strings

? ? ? ? ? ? }, {

? ? ? ? ? ? ? ? loader: "css-loader" // translates CSS into CommonJS

? ? ? ? ? ? }, {

? ? ? ? ? ? ? ? loader: "less-loader" // compiles Less to CSS

? ? ? ? ? ? }]

? ? ? ? }, {

? ? ? ? ? ? test: /\.css$/,

? ? ? ? ? ? use: [{

? ? ? ? ? ? ? ? loader: "style-loader" // creates style nodes from JS strings

? ? ? ? ? ? }, {

? ? ? ? ? ? ? ? loader: "css-loader" // translates CSS into CommonJS

? ? ? ? ? ? }]

? ? ? ? }, {

? ? ? ? ? ? test: /\.(png|svg|jpg|gif)$/,

? ? ? ? ? ? use: [

? ? ? ? ? ? ? ? 'file-loader'

? ? ? ? ? ? ]

? ? ? ? }, {

? ? ? ? ? ? test: /\.(woff|woff2|eot|ttf|otf)$/,

? ? ? ? ? ? use: [

? ? ? ? ? ? ? ? 'file-loader'

? ? ? ? ? ? ]

? ? ? ? }, {

? ? ? ? ? ? test: /\.json$/,

? ? ? ? ? ? loader: 'json-loader'

? ? ? ? }]

? ? },

};

package.json

{

? "name": "music-player-by-react",

? "version": "1.0.0",

? "description": "",

? "main": "app/index.js",

? "scripts": {

? ? "test": "echo \"Error: no test specified\" && exit 1",

? ? "build": "webpack",

? ? "start": "webpack-dev-server --open",

? ? "server": "node server.js",

? ? "watch": "webpack --watch"

? },

? "repository": {

? ? "type": "git",

? ? "url": "git+https://github.com/jiangyutong/music_player_build_react.git"

? },

? "keywords": [

? ? "react",

? ? "webpack",

? ? "music-player"

? ],

? "author": "LinkChenzy",

? "license": "MIT",

? "dependencies": {

? ? "babel-preset-es2015": "^6.24.1",

? ? "create-react-class": "^15.6.3",

? ? "jquery": "^3.3.1",

? ? "lodash": "^4.17.5",

? ? "react": "^16.3.2",

? ? "react-dom": "^16.3.2",

? ? "react-hot-loader": "^4.0.0",

? ? "react-router": "^4.2.0"

? },

? "devDependencies": {

? ? "autoprefixer": "^8.0.0",

? ? "babel-core": "^6.26.0",

? ? "babel-loader": "^7.1.4",

? ? "babel-plugin-import": "^1.6.7",

? ? "babel-plugin-react-transform": "^3.0.0",

? ? "babel-preset-env": "^1.6.1",

? ? "babel-preset-react": "^6.24.1",

? ? "babel-preset-stage-0": "^6.24.1",

? ? "clean-webpack-plugin": "^0.1.19",

? ? "css-loader": "^0.28.10",

? ? "express": "^4.16.3",

? ? "extract-text-webpack-plugin": "^3.0.2",

? ? "file-loader": "^1.1.11",

? ? "html-webpack-plugin": "^3.2.0",

? ? "json-loader": "^0.5.7",

? ? "less": "^3.0.1",

? ? "less-loader": "^4.0.6",

? ? "pubsub-js": "^1.6.0",

? ? "react-router-dom": "^4.2.2",

? ? "style-loader": "^0.20.2",

? ? "uglifyjs-webpack-plugin": "^1.2.5",

? ? "webpack": "^4.6.0",

? ? "webpack-cli": "^2.0.14",

? ? "webpack-dev-middleware": "^3.1.2",

? ? "webpack-dev-server": "^3.1.3"

? }

}