webpack初体验

//全局安装
npm install -g webpack
npm install -g webpack-cli

//项目依赖
npm install --save-dev webpack
npm install --save-dev webpack-cli

const fs = require('fs');
const path = require('path');

class ApiDocPlugin {
  constructor(options) {
    this.outputPath = options.outputPath || 'api.md';
    this.apiFolder = options.apiFolder || '../api';
  }

  apply(compiler) {
    compiler.hooks.emit.tapAsync('ApiDocPlugin', (compilation, callback) => {
      const apiFolder = path.resolve(__dirname, apiFolder);

      // 遍历 API 文件夹
      fs.readdir(apiFolder, (err, files) => {
        if (err) {
          console.error('Error reading API folder:', err);
          return;
        }

        let apiDocContent = '# API Documentation\n\n';

        // 遍历每个 API 文件
        files.forEach(file => {
          const filePath = path.resolve(apiFolder, file);

          // 读取文件内容
          const content = fs.readFileSync(filePath, 'utf8');

          // 提取接口定义及其注释
          const regex = /\/\*\*([\s\S]*?)\*\/[\s\S]*?function\s+(\w+)\(/g;
          let match;
          while ((match = regex.exec(content)) !== null) {
            const comment = match[1].trim();
            const functionName = match[2];
            apiDocContent += `## ${functionName}\n\n`;
            apiDocContent += `${comment}\n\n`;
          }
        });

        // 将生成的 API 文档写入文件
        const outputPath = path.resolve(compilation.options.output.path, this.outputPath);
        fs.writeFileSync(outputPath, apiDocContent);

        console.log('API documentation generated:', outputPath);

        callback();
      });
    });
  }
}

module.exports = ApiDocPlugin;

const path = require('path')

module.exports = {
  mode: 'development', // 模式
  entry: './src/index.js', // 打包入口地址
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.join(__dirname, 'dist') // 输出文件目录
  }
}

npm install cross-env -D

"scripts": {
    "dev": "cross-env NODE_ENV=dev webpack serve --mode development", 
    "test": "cross-env NODE_ENV=test webpack --mode production",
    "build": "cross-env NODE_ENV=prod webpack --mode production"
  },

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

console.log('process.env.NODE_ENV=', process.env.NODE_ENV) // 打印环境变量

const config = {
  entry: './src/index.js', // 打包入口地址
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.join(__dirname, 'dist') // 输出文件目录
  },
  module: { 
    rules: [
      {
        test: /\.css$/, //匹配所有的 css 文件
        use: 'css-loader' // use: 对应的 Loader 名称
      }
    ]
  },
  plugins:[ // 配置插件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

module.exports = (env, argv) => {
  console.log('argv.mode=',argv.mode) // 打印 mode(模式) 值
  // 这里可以通过不同的模式修改 config 配置
  return config;
}

npm intall webpack-dev-server

npm run dev

npm install style-loader -D

const config = {
  // ...
  module: { 
    rules: [
      {
        test: /\.css$/, //匹配所有的 css 文件
        use: ['style-loader','css-loader']
      }
    ]
  },
  // ...
}

const content = `${样式内容}`
const style = document.createElement('style');
style.innerHTML = content;
document.head.appendChild(style);

npm install mini-css-extract-plugin -D

// ...
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


const config = {
  // ...
  module: { 
    rules: [
      // ...
      {
        test: /\.(s[ac]|c)ss$/i, //匹配所有的 sass/scss/css 文件
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader, // 添加 loader
          'css-loader',
          'postcss-loader',
          'sass-loader', 
        ] 
      },
    ]
  },
  // ...
  plugins:[ // 配置插件
    // ...
    new MiniCssExtractPlugin({ // 添加插件
      filename: '[name].[hash:8].css'
    }),
    // ...
  ]
}

// ...