Webpack Shell 插件使用教程

Webpack Shell 插件使用教程

webpack-shell-pluginRun shell commands either before or after webpack builds项目地址:https://gitcode.com/gh_mirrors/we/webpack-shell-plugin

1. 项目的目录结构及介绍

webpack-shell-plugin/
├── src/
│   ├── index.js
│   └── utils.js
├── tests/
│   ├── scripts/
│   │   └── entry.js
│   └── test.js
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

• src/: 包含插件的主要源代码文件。
  • index.js: 插件的入口文件。
  • utils.js: 包含一些辅助函数。
• tests/: 包含测试脚本和测试文件。
  • scripts/: 包含测试用的脚本文件。
  • test.js: 测试文件。
• .gitignore: Git忽略文件。
• package.json: 项目的依赖和脚本配置。
• README.md: 项目的说明文档。
• webpack.config.js: Webpack配置文件。

2. 项目的启动文件介绍

项目的启动文件是 webpack.config.js，它包含了Webpack的配置信息，包括插件的加载和配置。

const WebpackShellPlugin = require('./src');
const path = require('path');

const config = {
  mode: 'development',
  entry: path.resolve(__dirname, 'tests/scripts/entry.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  watchOptions: {
    ignored: ['node_modules/**']
  },
  module: {
    noParse: /node_modules\/json-schema\/lib\/validate.js/,
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      }
    ]
  },
  plugins: [
    new WebpackShellPlugin({
      onBuildStart: {
        scripts: [
          `echo "test onBuildStart"`,
          'echo "Building "'
        ]
      },
      onBuildEnd: {
        scripts: [
          'echo "Done "'
        ]
      },
      dev: false,
      safe: false,
      logging: true
    })
  ]
};

module.exports = config;

3. 项目的配置文件介绍

项目的配置文件是 webpack.config.js，它包含了以下主要配置：

• mode: 设置为 development，表示开发模式。
• entry: 指定入口文件路径。
• output: 指定输出文件的路径和文件名。
• watchOptions: 设置监听选项，忽略 node_modules 目录。
• module: 配置模块加载规则。
  • noParse: 忽略某些文件的解析。
  • rules: 配置加载器规则，如处理CSS文件。
• plugins: 配置插件，这里使用了 WebpackShellPlugin 插件，并设置了 onBuildStart 和 onBuildEnd 事件。

通过以上配置，可以实现Webpack在构建前后执行指定的Shell脚本。

webpack-shell-pluginRun shell commands either before or after webpack builds项目地址:https://gitcode.com/gh_mirrors/we/webpack-shell-plugin