package.json：
{
"name": "webpackTutorial",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config webpack.dev.js --open",
"build": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"bootstrap": "^4.3.1",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
}
}
webpack.common.js：
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// devtool:"none",
entry:"./src/index.js",
plugins: [new HtmlWebpackPlugin({
template: "./src/template.html"
})],
module: {
rules: [ {
test:/.scss$/,
use:["style-loader","css-loader","sass-loader"]
},
{
test:/.html$/,
use:["html-loader"]
},
{
test: /.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs"
}
}
}
]
}
};
webpack.dev.js：
const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{
mode: "development",
// devtool:"none",
output: {
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
});
webpack.prod.js：
const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{
mode: "production",
// devtool:"none",
output: {
filename:"main.[contentHash].js",
path:path.resolve(__dirname,"dist")
},
});
目录：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/> -->
<title>Webpack Demo</title>
</head>
<body class="container">
<h1 class="text-center mt-5">
Welcome!
</h1>
<div class="alert alert-danger" id="error" role="alert"></div>
<div class="row mt-5">
<div class="col">
<div class="input-group">
<input type="text" id="numberOne" class="form-control" />
<div class="input-group-append input-group-prepend">
<span class="input-group-text">+</span>
</div>
<input type="text" id="numberTwo" class="form-control" />
</div>
</div>
<div class="col">
<button id="addValues" class="btn btn-primary">Add Values</button>
</div>
</div>
<div class="card mt-5">
<div class="card-body">The result is: <span id="result"></span></div>
</div>
<img src="./assets/webpackImage.jpeg" width="300"/>
<script type="text/javascript" src="main.cde0d608a66b63a7423e.js"></script></body>
</html>
正如你所看到的<img src="./assets/webpackImage.jpeg" width="300"/>图像的src没有与哈希(webpack(动态链接。这是文件加载器的问题还是其他问题？ 当我尝试与npm run build脚本捆绑时，我遇到的错误是：
$ npm run build
> webpackTutorial@1.0.0 build C:UsersAIRBORNE ROYAL GROUPdesktopwebpack
> webpack --config webpack.prod.js
Hash: 08bd854655be2715fd49
Version: webpack 4.41.2
Time: 3322ms
Built at: 11/30/2019 4:05:57 PM
2 assets
Entrypoint main = main.cde0d608a66b63a7423e.js
[0] ./src/main.scss 443 bytes {0} [built]
[1] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/main.scss 140 KiB {0} [built]
[4] ./src/index.js + 5 modules 2.31 KiB {0} [built]
| ./src/index.js 312 bytes [built]
| ./src/app/app.js 635 bytes [built]
| ./src/app/alert.service.js 652 bytes [built]
| ./src/app/component.service.js 546 bytes [built]
| ./src/app/utils/inputs-are-valid.js 127 bytes [built]
| ./src/app/utils/parse-inputs.js 93 bytes [built]
+ 2 hidden modules
ERROR in Error: Child compilation failed:
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file):
SyntaxError: Unexpected character '�' (1:0)
- compiler.js:79
[webpack]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:343
[webpack]/[webpack]/lib/Compiler.js:343:11
- Compiler.js:681
[webpack]/[webpack]/lib/Compiler.js:681:15
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[webpack]/[tapable]/lib/Hook.js:154:20
- Compiler.js:678
[webpack]/[webpack]/lib/Compiler.js:678:31
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[webpack]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1423
[webpack]/[webpack]/lib/Compilation.js:1423:35
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[webpack]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1414
[webpack]/[webpack]/lib/Compilation.js:1414:32
- index.js:321
[webpack]/[terser-webpack-plugin]/dist/index.js:321:9
- TaskRunner.js:48 TaskRunner.run
[webpack]/[terser-webpack-plugin]/dist/TaskRunner.js:48:7
- index.js:227 TerserPlugin.optimizeFn
[webpack]/[terser-webpack-plugin]/dist/index.js:227:18
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[webpack]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1409
[webpack]/[webpack]/lib/Compilation.js:1409:36
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[webpack]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1405
[webpack]/[webpack]/lib/Compilation.js:1405:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[webpack]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1342 Compilation.seal
[webpack]/[webpack]/lib/Compilation.js:1342:27
- Compiler.js:675
[webpack]/[webpack]/lib/Compiler.js:675:18
- Compilation.js:1261
[webpack]/[webpack]/lib/Compilation.js:1261:4
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[webpack]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1253 Compilation.finish
[webpack]/[webpack]/lib/Compilation.js:1253:28
- Compiler.js:672
[webpack]/[webpack]/lib/Compiler.js:672:17
- Compilation.js:1185
[webpack]/[webpack]/lib/Compilation.js:1185:12
- Compilation.js:1097
[webpack]/[webpack]/lib/Compilation.js:1097:9
- task_queues.js:75 processTicksAndRejections
internal/process/task_queues.js:75:11
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/template.html 1.62 KiB {0} [built]
[1] ./src/assets/webpackImage.jpeg 281 bytes {0} [built] [failed] [1 error]
ERROR in ./src/assets/webpackImage.jpeg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./src/template.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/template.html) 1:1576-1613
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpackTutorial@1.0.0 build: `webpack --config webpack.prod.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpackTutorial@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersAIRBORNE ROYAL GROUPAppDataRoamingnpm-cache_logs2019-11-30T08_05_57_228Z-debug.log
您的图像具有扩展jpeg，但test: /.(svg|png|jpg|gif)$/没有规则。
将其更改为test: /.(svg|png|jpe?g|gif)$/或test: /.(svg|png|jpg|jpeg|gif)$/