Начал изучать вебпак и не могу немного разобраться с dev-server. Пытаюсь в конфиге просто указать точку от куда нужно "стартовать" вот так:
publicPath: path.resolve(__dirname, "dist/html"),
Выдает ошибку:
× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'publicPath'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
Передаю вот так:
devServer:{
publicPath: path.resolve(__dirname, "dist/html"),
},
Ошибка исчезает, но эффект нулевой...
Так же почему то даже при запуске dev-server'a, слежения за файлами не происходит... Не могу разобраться как настроить его, прошу помощи.
Вот полный код:
webpack.config.jsconst CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const config = {
entry: ["./src/js/index.js", "./src/scss/style.scss","./src/html/index.html"],
output: {
filename: "./js/bundle.js"
},
devtool: "source-map",
mode: "production",
devServer:{
publicPath: path.resolve(__dirname, "dist/html"),
},
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
extractComments: true
})
]
},
module: {
rules: [
{
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, "src/scss"),
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {}
},
{
loader: "css-loader",
options: {
sourceMap: true,
url: false
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: true,
plugins: () => [
require("cssnano")({
preset: [
"default",
{
discardComments: {
removeAll: true
}
}
]
})
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.html$/,
include: path.resolve(__dirname, "src/html"),
use: ["raw-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/html/index.html',
filename: 'html/index.html'
}),
new MiniCssExtractPlugin({
filename: "./css/style.bundle.css"
}),
new CopyWebpackPlugin([
{
from: "./src/fonts",
to: "./fonts"
},
{
from: "./src/favicon",
to: "./favicon"
},
{
from: "./src/img",
to: "./img"
}
])
]
};
module.exports = (env, argv) => {
if (argv.mode === "production") {
config.plugins.push(new CleanWebpackPlugin());
}
return config;
};
package.json{
"name": "static-site-webpack-habr",
"version": "2.0.0",
"description": "HTML template",
"main": "src/index.js",
"scripts": {
"dev": "webpack --mode development",
"watch": "webpack --mode development --watch",
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.15.0"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.3",
"css-loader": "^3.0.0",
"cssnano": "^4.1.10",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"prettier": "^1.18.2",
"raw-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"terser-webpack-plugin": "^1.3.0",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
}
Простой
