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
项目的目录结构、启动文件和配置文件的介绍。希望这份