Webpack Boilerplate 项目教程
1. 项目的目录结构及介绍
webpack-boilerplate/
├── src/
│ ├── index.js
│ ├── styles/
│ │ ├── main.css
│ ├── assets/
│ │ ├── image.png
├── dist/
├── webpack.config.js
├── package.json
├── README.md
src/
: 源代码目录,包含项目的入口文件和其他资源文件。index.js
: 项目的入口 JavaScript 文件。styles/
: 存放 CSS 样式文件的目录。main.css
: 主要的 CSS 文件。
assets/
: 存放静态资源文件的目录。image.png
: 示例图片文件。
dist/
: 打包后的文件目录,包含最终生成的文件。webpack.config.js
: Webpack 配置文件。package.json
: 项目依赖和脚本配置文件。README.md
: 项目说明文档。
2. 项目的启动文件介绍
项目的启动文件是 src/index.js
。这个文件是 Webpack 打包的入口点,通常会引入其他模块和资源文件,并初始化应用。
// src/index.js
import './styles/main.css';
import './assets/image.png';
console.log('Hello, Webpack!');
3. 项目的配置文件介绍
项目的配置文件是 webpack.config.js
。这个文件定义了 Webpack 的打包规则、插件和其他配置项。
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
entry
: 指定入口文件路径。output
: 指定输出文件路径和文件名。module
: 定义模块的加载规则。rules
: 包含多个加载器配置,如css-loader
和file-loader
。
plugins
: 配置插件,如HtmlWebpackPlugin
,用于生成 HTML 文件。
以上是基于 https://github.com/cvgellhorn/webpack-boilerplate.git
项目的教程,包含了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助!