我安装了npm: 网络包 webpack-cli CSS加载器 节点 sass 萨斯 sass 加载器 样式加载器 迷你 CSS 提取插件
并收到: http://localhost:8080 上出现 404 错误 无法获取/
package.json:
{
"name": "landing-dlmr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.8.1",
"mini-css-extract-plugin": "^2.7.6",
"node-sass": "^9.0.0",
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}
webpack.config.json:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/main.js',
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.css',
})
],
watch: true
};
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dellmayer</title>
<!-- <link rel="stylesheet" href="./styles/main.scss"> -->
<link rel="stylesheet" href="../dist/css/main.css">
</head>
<body class="page__body">
<header class="header">
<nav class="menu">
<ul class="menu__list">
<li class="menu__item">HOME</li>
<li class="menu__item">HISTORY</li>
<li class="menu__item">PRODUCT</li>
<li class="menu__item">SPECIFICATION</li>
<li class="menu__item">IN THE BOX</li>
<li class="menu__item">CONTACT</li>
</ul>
</nav>
</header>
<!-- <script type="text/javascript" src="./index.js"></script> -->
<script type="text/javascript" src="../dist/js/main.js"></script>
</body>
</html>
索引/js:
import './styles/main.scss';
我可以直接在浏览器中打开已实现样式的index.html,但看不到localhost
对于开发模式(包括
),您可以使用webpack-dev-server
,因为它使用多个将CSS注入到DOM中并且工作速度更快。style-loader
使用
html-webpack-plugin
将JS脚本和CSS样式标签注入到HTML模板中。
例如
项目结构:
✗ tree -L 2 -I node_modules
.
├── package-lock.json
├── package.json
├── src
│ ├── index.html
│ ├── index.js
│ └── style.scss
└── webpack.config.js
1 directory, 6 files
src/index.js
:
import './style.scss'
src/style.scss
:
.menu__item {
font-weight: bold;
}
src/index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dellmayer</title>
</head>
<body class="page__body">
<header class="header">
<nav class="menu">
<ul class="menu__list">
<li class="menu__item">HOME</li>
<li class="menu__item">HISTORY</li>
<li class="menu__item">PRODUCT</li>
<li class="menu__item">SPECIFICATION</li>
<li class="menu__item">IN THE BOX</li>
<li class="menu__item">CONTACT</li>
</ul>
</nav>
</header>
</body>
</html>
package.json
:
{
"version": "1.0.0",
"scripts": {
"build": "webpack",
"dev": "webpack serve"
},
"devDependencies": {
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.5.3",
"mini-css-extract-plugin": "^2.7.6",
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}
构建日志:
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.54.78:8080/
<i> [webpack-dev-server] Content not from webpack is served from './dist' directory
asset js/main.js 292 KiB [emitted] (name: main)
asset index.html 642 bytes [emitted]
runtime modules 30.3 KiB 15 modules
modules by path ./node_modules/ 186 KiB
modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modules
modules by path ./node_modules/webpack/hot/*.js 5.3 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB 4 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.31 KiB
./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 2.25 KiB [built] [code generated]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./src/ 2.83 KiB
./src/index.js 22 bytes [built] [code generated]
./src/style.scss 2.36 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss 462 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 442 ms