与webpack捆绑在一起的Javascript无法工作
所以，在将bundle.js链接到我的index.html之后，基本上我的javascript就无法工作了。每个函数都是未定义的，即使bundle.js正在加载，我可以通过开发工具中的源代码访问它。但是，如果我直接链接我的javascript文件"app.js“，一切都会按预期工作。我想我的webpack设置很可能会有问题，因为这是我第一次设置它。我将很高兴得到关于这个webpack.config的任何其他提示。提前感谢:)
这是我的package.json：
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"devs": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"extract-loader": "^3.0.0",
"file-loader": "^2.0.0",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}webpack.config.js：
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
main: ["./src/index.js"]
},
output: {
filename: "scripts/bundle.js",
path: path.resolve(__dirname, "./dist")
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].html"
}
},
{
loader: "extract-loader"
},
{
loader: "html-loader",
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.sass$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},
{
test: /\.(jpg|gif|png)$/,
use: [
{
loader: "file-loader",
options: {
name: "images/[name].[ext]"
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles/[name].css",
chunkFilename: "[id].css"
})
],
watch: true,
};主要的webpack入口index.js：
require('./scripts/app.js');
require('./styles/sass/app.sass');
require("./index.html");index.html脚本链接：
<script src="./scripts/app.js"></script>编辑问题肯定存在于正在生成的bundle.js中。如果我在bundle.js开始时复制函数，一切都会按预期工作。以下是小提琴中的bundle.js代码：
https://jsfiddle.net/ustqkg7v/
如果我在bundle.js的开头复制app.js中的函数，一切都会正常工作。我认为范围可能有问题，但我不确定。
编辑2我已经设置了具有相同文件夹结构，文件等的较小项目。完全相同的问题。链接如下：
https://www.dropbox.com/s/9f5pf6y4fbb60dw/webpack4-test.rar?dl=0
回答 1
Stack Overflow用户
发布于 2018-10-30 02:39:20
这个问题也可能是因为这个路径，我假设webpack.config.js位于项目的根级别，所以我认为它必须是path: path.resolve(__dirname, "./dist")：path.resolve(__dirname, "dist")
然后在html中，需要从dist文件夹中引用它。
<script src="./dist/app.js"></script>在此之前，请检查dist文件夹中是否生成了app.js
https://stackoverflow.com/questions/53051770
复制相似问题
腾讯云开发者
