- 创建项目目录，在项目根目录下打开命令终端执行npm init -y，进行npm初始化
- 项目结构，手动创建相关文件夹
webpack-demo
|- package.json
|- package-lock.json
|- /src
|- assets
|- components
|- views
|- index.js
|- webpack.config.js
- 开发环境安装
- 安装webpack双剑客
npm install webpack webpack-cli --save-dev - 运行配置
在package.json文件下的scripts对象里增加，"build": "webpack"，增加后可通过npm run build执行webpack，如果不增加可通过npx webpack --config webpack.config.js运行 - 热重载配置
即修改文件实时刷新网页，npm install --save-dev webpack-dev-server
在package.json文件下的scripts对象里增加，"start": "webpack serve --open"，
可通过npm run start启动项目。 --open：自动打开网页
- 配置webpack，安装path，npm install --save-dev path, 在webpack.config.js文件下输入
const path = require('path');
module.exports = {
// 声明开放环境
mode: "development",
// 热重载文件路径，./dist表示在dist目录下查找index.html文件
devServer: {
static: './dist',
},
// 入口文件
entry: './src/index.js',
// 编译输出配置
output: {
// 文件输出名称
filename: 'bundle.js',
// 输出路径
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
// 加载css，使用sass时需要安装sass依赖 npm i -D sass sass-loader
{
test: /\.css|scss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
// 加载图像资源
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
// 加载fonts字体
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
// 加载ejs模板文件
{
test: /\.ejs$/i,
use: ['html-loader', 'template-ejs-loader'],
},
]
},
plugins: [
]
};
5.生成html文件
- 执行npm install --save-dev html-webpack-plugin，自动生成html模板文件
- 这里使用ejs模板语法进行编写，需要安装编译模板依赖插件： 执行 npm install -D template-ejs-loader html-loader
- 在module对象下的rules属性中配置编译.ejs文件需要用到的插件
{
test: /\.ejs$/i,
use: ['html-loader', 'template-ejs-loader'],
},
6.现在就可以在plugins下通过html-webpack-plugin生成模板文件了
- 在views文件夹下，创建index/index.ejs页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<div class="index">
<%- include('../../components/Header/Header.ejs', { name: 'header' }) %>
<div class="content">
<div>首页</div>
<a href="about.html">toAbout</a>
<span class="iconfont icon-faxian"></span>
</div>
<%- include('../../components/Footer/Footer.ejs', { name: 'footer' }) %>
</div>
<script>
const a = document.querySelector('.header')
console.log('a', a)
</script>
</body>
</html>
- 在components文件夹下，创建Header/创建Header.ejs组件
<div class="header"><%= name %></header>
- 在components文件夹下，创建footer组件
<div class="footer"><%= footer %></header>
7.配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { htmlWebpackPluginTemplateCustomizer } = require('template-ejs-loader')
module.exports = {
mode: "development",
entry: './src/index.js',
devServer: {
static: './src/views/index/index.ejs',
},
// 控制台打印信息追踪在哪个文件出现的
devtool: 'inline-source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
// 在每次构建前清理 /dist 文件夹，这样只会生成用到的文件
clean: true,
},
module: {
rules: [
// 加载css
{
test: /\.css|scss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
// 加载图像资源
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
// 加载fonts字体
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
// 加载ejs模板文件
{
test: /\.ejs$/i,
use: ['html-loader', 'template-ejs-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: '测试',
template: htmlWebpackPluginTemplateCustomizer({
templatePath: './src/views/index/index.ejs',
templateEjsLoaderOption:{
data: {
title:'测试'
}
}
}),
}),
new HtmlWebpackPlugin({
filename: 'about.html',
title: 'about',
template: htmlWebpackPluginTemplateCustomizer({
templatePath: './src/views/about/about.ejs',
templateEjsLoaderOption:{
data: {
title:'测试'
}
}
})
}),
],
};
最后，可在index.js入口文件中引入页面需要编译的资源，例 index.js
// webpack入口文件，引入资源
import './views/index/index.scss' // 引入index页面样式
import './assets/iconfont/iconfont.css' // 引入图标资源
编写完成，运行项目：npm run start
