problem description
when I configured the webpack4 development environment, I made an error in turning on the dev-server Times, but there was no problem with me packaging the production environment.
the environmental background of the problems and what methods you have tried
related codes
/ / this is webpack.config.js configuration
const webpack = require ("webpack")
const path = require (" path")
const HTMLPlugin = require ("html-webpack-plugin")
const MiniCssExtractPlugin = require ("mini-css-extract-plugin") / / detach css
const isDev = process.env.NODE_ENV = "development"
module.exports = {
entry: {
index: path.join(__dirname, "./src/js/index.js") //
},
output: {
path: path.join(__dirname, "./dist"),
filename: "static/js/[name].[hash].js", // //hash
// chunkFilename: "[name].[hash:4].js",
publicPath: "/" // URLAPI
},
/ / if we don"t want webpack to package a file, but manually import it directly on the page using the script tag, or when using CDN resources, the externals configuration item works.
/ / but you need to introduce
/ / externals: {
/ / jquery: "jQuery"
/ /},
/ / extract the public module
/ / optimization: {
/ / runtimeChunk: {
/ / name:" manifest"
/ /},
/ minimizer: true / / [new UglifyJsPlugin ({...})]
/ / splitChunks: {
/ / chunks: "async",
/ / minSize: 30000,
/ / minChunks: 1,
/ / maxAsyncRequests: 5,
/ / maxInitialRequests: 3,
/ / name: false
/ / cacheGroups: {
/ / vendor: {
/ / name: "vendor",
/ / chunks:" initial",
/ / priority:-10,
/ / reuseExistingChunk: false,
/ / test: / node_modules/ (. *). Js/
/ /}
/ / styles: {
/ / name: "styles",
/ / test: /. (scss | css) $/,
/ / chunks:" all",
/ / minChunks: 1,
/ / reuseExistingChunk: true
/ / enforce: true
/ /}
/ /},
resolve: {
extensions: [".js", ".jsx", ".json", ".less"],
alias: {
"@": path.resolve(__dirname, "./src"),
}
},
module: {
// webpackJSX
rules: [{
test: /\.jsx?$/,
loader: "babel-loader"
}, {
test: /\.jsx?$/, // webpackes6
exclude: "/node_modules/",
loader: "babel-loader"
}, {
test: /\.css$/,
use: [{
loader: "style-loader"
}, {
loader: MiniCssExtractPlugin.loader
}, {
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}, {
loader: "postcss-loader"
}]
}, {
test: /\.less$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
"postcss-loader"
]
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: "static/img/[name].[hash:7].[ext]"
}
}, {
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: "static/media/[name].[hash:7].[ext]"
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: "static/fonts/[name].[hash:7].[ext]"
}
}]
},
plugins: [
new HTMLPlugin({
title: "webpack_react",
filename: "./index.html",
template: path.join(__dirname, "./index.html")
}), // HTMLWebpack
new MiniCssExtractPlugin({
filename: "static/css/[name].[chunkhash:8].css",
chunkFilename: "[id].css"
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: isDev ? ""development"" : ""production"" //
}
}),
//requireimport,
// :resolve.aliasrequirerequireProvidePlugin
// new webpack.ProvidePlugin({
// $: "$"
// })
]
}
/ / this is the webpack.dev.config.js configuration
const webpack = require ("webpack")
const merge = require ("webpack-merge")
const webpackBase = require (". / webpack.config.js")
var path = require ("path")
module.exports = merge (webpackBase, {
/ / devtool: "cheap-module-eval-source-map",
mode:" development",
devServer: {
inline: true,//websocket
hot: true,//
contentBase: path.join(__dirname, "dist"), //
port: 3824, //
host: "localhost",
overlay: true,
compress: false // gzip
},
watchOptions: {
ignored: /node_modules/, //
aggregateTimeout: 500, //,500
poll: 1000 //
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
})
what result do you expect? What is the error message actually seen?
seek a solution, thank you