所以在将 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 开头的函数,一切都会按预期进行。这是 fiddle 中的 bundle.js 代码:
https://jsfiddle.net/ustqkg7v/
如果我在 bundle.js 的开头复制 app.js 中的函数,一切都会按预期进行。我认为范围可能有问题,但我不确定。
EDIT 2 我设置了具有相同文件夹结构、文件等的较小项目。完全相同的问题。这是链接:
https://www.dropbox.com/s/9f5pf6y4fbb60dw/webpack4-test.rar?dl=0
最佳答案
这个问题也可能是因为这个 path: path.resolve(__dirname, "./dist")
。我假设 webpack.config.js
是在项目的根级别,所以我认为它必须是路径:path.resolve(__dirname, "dist")
然后在 html 中它需要从 dist 文件夹中引用
<script src="./dist/app.js"></script>
在此之前检查 app.js
是否在 dist 文件夹中生成
关于与 webpack 捆绑在一起的 Javascript 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53051770/