如何解决为什么 webpack 输出来自 /
我刚刚学习webpack,一切正常,但是在上次成功启动项目(纯JS)之后,突然一切都失败了。 当我开始项目时,出现此错误: /得到 i“wds”:项目运行在 http://localhost:3000/ i 「wds」:webpack 输出来自 http://localhost:3000/ i 「wds」:不是来自 webpack 的内容从 D:\folderName\folderName\folderName
提供我不明白为什么会这样。
文件夹结构:
babel.config.json
node_modules/
package-lock.json
src/
---- assets/
---- components/
---- core/
---- favicon.ico
---- index.html
---- index.js
---- scss/
---- dist/
package.json
README.md
webpack.config.js
**package.json**
{
"name": "excel-corse","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {
"start": "webpack serve --mode=development","build": "webpack --mode=production"
},"repository": {
"type": "git","url": "git+https://github.com/Kunerkhan/Exel-JS.git"
},"keywords": [],"author": "","private": true,"browserslist": "> 0.25%,not dead","license": "ISC","bugs": {
"url": "https://github.com/Kunerkhan/Exel-JS/issues"
},"homepage": "https://github.com/Kunerkhan/Exel-JS#readme","devDependencies": {
"@babel/core": "^7.13.8","@babel/plugin-proposal-class-properties": "^7.13.0","@babel/preset-env": "^7.13.9","babel-loader": "^8.2.2","copy-webpack-plugin": "^7.0.0","css-loader": "^5.1.1","eslint": "^7.21.0","eslint-config-google": "^0.14.0","eslint-webpack-plugin": "^2.5.2","html-webpack-plugin": "^5.2.0","mini-css-extract-plugin": "^1.3.9","sass": "^1.32.8","sass-loader": "^11.0.1","webpack": "^5.24.2","webpack-cli": "^4.5.0","webpack-dev-server": "^3.11.2"
},"dependencies": {
"@babel/eslint-parser": "^7.13.8","clean-webpack-plugin": "^3.0.0","core-js": "^3.9.0","normalize.css": "^8.0.1","regenerator-runtime": "^0.13.7"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const copyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = (env,argv) => {
const isProd = argv.mode === 'production';
const isDev = !isProd;
const filename = (ext) => isProd ? `[name].[contenthash].bundle.${ext}` : `[name].bundle.${ext}`;
const plugins = () => {
const base = [
new HtmlWebpackPlugin({
template: './index.html'
}),new copyPlugin({
patterns: [
{
from: path.resolve(__dirname,'src','favicon.ico'),to: path.resolve(__dirname,'dist')
}
]
}),new MiniCssExtractPlugin({
filename: filename('css')
}),new CleanWebpackPlugin()
];
if (isDev) {
base.push(new ESLintPlugin());
}
return base;
};
return {
target: 'web',context: path.resolve(__dirname,'src'),entry: {
main: './index.js'
},output: {
path: path.resolve(__dirname,'dist'),filename: filename('js')
},resolve: {
extensions: ['.js'],alias: {
'@': path.resolve(__dirname,'@core': path.resolve(__dirname,'core')
}
},plugins: plugins(),devServer: {
contentBase: path.join(__dirname,publicPath: 'http://localhost:3000/',port: 3000,open: true,hot: true,watchContentBase: true
},devtool: isDev ? 'source-map' : false,module: {
rules: [
{
test: /\.s[ac]ss$/i,use: [
MiniCssExtractPlugin.loader,'css-loader','sass-loader'
]
},{
test: /\.m?js$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
]
}
};
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。