// 主要是__dirname, __filename字段的获取
import path, { dirname } from 'node:path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
target: "web",
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
publicPath: "/",
filename: "index.js",
},
resolve: {
extensions: [".ts", ".tsx", ".json", ".js"],
},
module: {
rules: [],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "/public/index.html"),
scriptLoading: "blocking",
inject: "head",
}),
],
devServer: {
static: {
// https://webpack.docschina.org/configuration/dev-server/#directory
// 告诉服务器从哪里提供内容。只有在你希望提供静态文件时才需要这样做。static.publicPath 将会被用来决定应该从哪里提供 bundle，并具有优先级。
directory: path.join(__dirname, "public"),
// 告诉服务器在哪个 URL 上提供 static.directory 的内容。 (静态资源)
// 配置了下面的内容的话, 可以访问: http://localhost:8080/dist/webpack.html 拿到的会是没有注入代码的原生静态代码
publicPath: "/dist",
},
hot: true,
port: "8080",
open: true,
proxy: {
"/api": {
target: "",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
},
},
};
2023-01-11 webpack 在package.json中type="module"模式下的配置
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 注意：一定要先安装webpack-cli 哦 当你报这个错误时，可能就是你更改了npm安装包的默认全局路径，错误如...
- 新年快乐！https://www.bilibili.com/video/BV15741177Eh?p=78&spm...
- 通常我们使用npm init命令来创建一个npm程序时，会自动生成一个package.json文件。package...
- 在webpack-course项目下新建子文件src/main.css,然后随便写入某一个样式 在src/main...
- 1、设置 package.json 的变量值 2、设置对应的启动文件 a、设置开发环境 b、设置生产环境
