J'essaie de suivre le tutoriel ici https://webpack.js.org/guides/asset-management/ mais je n'arrive jamais à charger le fichier css. (le texte n'est jamais rouge)
https://github.com/bryandellinger/webpackassetmanagement
> --dist
> ----bundle.js
> ----index.html
> --src
> ----index.js
> ----style.csswebpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};paquet.json
{
"name": "webpack1",
"version": "1.0.0",
"description": "webpack tutorial",
"private": true,
"scripts": {
"dev": "lite-server",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"style-loader": "^0.22.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"lite-server": "^2.4.0",
"lodash": "^4.17.10"
}
}index.js
import _ from 'lodash';
function component() {
let element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}
document.body.appendChild(component(
));style.css
.hello {
color: red;
}index.html
<!doctype html>
<html>
<head>
<title>Asset Management</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
