Day04-Webpack打包js、css文件，html的介绍及常用标签，前端实战开发视频

作者：System 时间：2024年08月08日分类：所有,html 字数：1363

在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配置示例，实际项目中可能还需要配置更多的插件和加载器来优化构建过程。

Day04-Webpack打包js、css文件，html的介绍及常用标签，前端实战开发视频

评论已关闭

推荐阅读