Page Skeleton Webpack Plugin 使用教程

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

page-skeleton-webpack-plugin/
├── examples/
│   ├── sale/
│   └── ...
├── lib/
├── src/
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js

• examples/: 包含示例项目的目录，其中 sale/ 是一个具体的示例。
• lib/: 编译后的文件目录。
• src/: 源代码目录。
• .gitignore: Git 忽略文件配置。
• .npmignore: NPM 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 webpack.config.js，它包含了 Webpack 的基本配置和插件的配置。以下是一个简化的示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');
const path = require('path');

const webpackConfig = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      // Your HtmlWebpackPlugin config
    }),
    new SkeletonPlugin({
      pathname: path.resolve(__dirname, `$[customPath]`), // the path to store shell file
      staticDir: path.resolve(__dirname, 'dist') // the directory for static files
    })
  ]
};

module.exports = webpackConfig;

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和 webpack.config.js。

package.json

{
  "name": "page-skeleton-webpack-plugin",
  "version": "1.0.0",
  "description": "Webpack plugin to generate the skeleton page automatically",
  "main": "lib/index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "html-webpack-plugin": "^4.5.0",
    "page-skeleton-webpack-plugin": "^1.0.0"
  },
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 入口文件。
• scripts: 脚本命令，如 dev 和 build。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');
const path = require('path');

const webpackConfig = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      // Your HtmlWebpackPlugin config
    }),
    new SkeletonPlugin({
      pathname: path.resolve(__dirname, `$[customPath]`), // the path to store shell file
      staticDir: path.resolve(__dirname, 'dist') // the directory for static files
    })
  ]
};

module.exports = webpackConfig;

• entry: 入口文件。
• output: 输出配置。
• plugins: 插件配置，包括 HtmlWebpackPlugin 和 SkeletonPlugin。

以上是 page-skeleton-webpack-plugin 项目的目录结构、启动文件和配置文件的介绍。希望这份