Day04-Webpack打包js、css文件，html的介绍及常用标签，前端实战开发视频
在Web开发中，为了提升页面加载速度，通常会将JavaScript、CSS和HTML文件进行打包压缩，并且可以配置Webpack来处理HTML文件。以下是一些常用的Webpack配置示例：
- 打包JavaScript文件：
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};- 打包CSS文件：
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
],
},
// ...
};- 打包HTML文件：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
// ...
};在HTML文件中，你可能会使用到一些标签，例如：
<!DOCTYPE html>：定义文档类型。<html lang="en">：指定文档的语言。<head>：包含了文档的元数据，如<title>、<meta>、<link>等。<body>：包含了页面的主要内容。
这些标签不会被Webpack处理，因为它们是静态文本。Webpack处理的是在<script>和<style>标签中引用的JavaScript和CSS文件。
以上是一个基本的Webpack配置示例，实际项目中可能还需要配置更多的插件和加载器来优化构建过程。
评论已关闭