htmlwebpackplugin is not defined
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 选项，这有助于解释说明我们的目的（仅解释说明，不要用于生产环境）
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"
}
}
