在上一篇基础上，再加入css等资源的打包。
1. 修改项目结构
在原来的基础上增加了css 按如下结构来组织：
webpack-demo/
├── src/
│ ├── index.js
| ├── index.html
| ├── style.css
├── dist/
├── webpack.config.js
├── pac
2. 各文件内容分别如下
-
src/index.js:import './style.css'; function component() { const element = document.createElement('div'); element.innerHTML = 'Hello, Webpack!'; element.classList.add('hello'); return element; } document.body.appendChild(component()); -
src/style.css:.hello { color: red; font-size: 20px; } -
index.html:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Webpack Demo</title> </head> <body> <script src="../dist/main.js"></script> </body> </html>
3. 修改webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'main.js', // 打包后输出的文件名
path: path.resolve(__dirname, 'dist'), // 输出的目录
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
4. 安装 Loader
Webpack 默认只能处理 JS 文件，要处理 CSS 文件，我们需要安装 style-loader 和 css-loader：
npm install style-loader css-loader --save-dev
5. 运行：
npm run build
6. 查看结果
打开 index.html，你会看到页面上显示了红色的 “Hello, Webpack!” 文字。
