Webpack 开发模板教程
1. 项目的目录结构及介绍
webpack-dev-boilerplate/
├── src/
│ ├── index.js
│ ├── styles/
│ │ ├── main.css
│ ├── assets/
│ │ ├── logo.png
├── webpack.config.js
├── package.json
├── README.md
src/
: 源代码目录,包含主要的 JavaScript 文件和样式文件。index.js
: 项目的入口文件。styles/
: 存放样式文件的目录。main.css
: 主要的样式文件。
assets/
: 存放静态资源的目录。logo.png
: 项目使用的图标或图片。
webpack.config.js
: Webpack 的配置文件。package.json
: 项目的依赖和脚本配置文件。README.md
: 项目的说明文档。
2. 项目的启动文件介绍
项目的启动文件是 src/index.js
。这个文件是 Webpack 打包的入口点,通常包含项目的初始化代码和主要的逻辑。
// src/index.js
import './styles/main.css';
import logo from './assets/logo.png';
document.addEventListener('DOMContentLoaded', () => {
const app = document.createElement('div');
app.innerHTML = `<img src="${logo}" alt="Logo">`;
document.body.appendChild(app);
});
3. 项目的配置文件介绍
项目的配置文件是 webpack.config.js
。这个文件定义了 Webpack 如何打包和构建项目。
// webpack.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'],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
};
entry
: 指定项目的入口文件。output
: 指定打包后的输出文件和路径。module
: 定义不同类型文件的处理规则。css
文件使用style-loader
和css-loader
处理。- 图片文件使用
file-loader
处理。
devServer
: 配置开发服务器,指定内容基础路径、压缩和端口。
通过以上配置,可以实现项目的开发、构建和调试。