极客观点
项目管理
HarmonyOS
最近学webpack，都是自己手写配置，没有添油加醋成分
a.css
body {background: red;}main.js
require('./a.css');
function a(){}package.json
{
"name": "cssloader",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --mode development",
"build": "webpack -p --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}
}
webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}index.html
<html>
<head>
<!-- 在这里引入css文件就没有问题 <link rel="stylesheet" href="./a.css"> -->
</head>
<body>
<h1>css-loader测试</h1>
<script src="./main.js"></script>
</body>
</html>执行npm run dev
终端没有报错，但是浏览器报错了
这究竟是为什么。。。。救救我这小白吧~
你在
index.html中引入的JS是main.js。 你把这个修改为bundle.js就可以了。原因：你想想你为什么需要使用webpack把
main.js进行打包，是因为你的浏览器是不支持你所写的模块化的方式，所以才需要借助webpack进行模块化处理。