About this project:
- webpack4 + react + mobx-react + react-spring
- write a webpack plugin
- any element size width sprite image
.
├── package.json
├── postcss.config.js
├── readme.md
├── screenshot
│ └── 0.jpg
├── src
│ ├── assets
│ │ ├── fav.ico
│ │ └── images
│ │ ├── raw
│ │ │ ├── logo01.png
│ │ │ └── logo02.png
│ │ ├── sp.png // auto generated
│ │ └── sprite
│ │ ├── logo01.png
│ │ ├── logo02.png
│ │ ├── logo03.png
│ │ └── logo04.png
│ ├── components
│ │ ├── Home.js
│ │ ├── Login.js
│ │ ├── Sprite.js // an example for sprite image
│ │ └── Router.js // router with auth
│ ├── index.html
│ ├── index.js
│ ├── routes.js
│ ├── stores
│ │ └── store.js
│ └── styles
│ ├── index.scss
│ ├── login.scss
│ ├── home.scss
│ ├── sprite.scss
│ ├── _sprite.js // auto generated
│ └── _sprite.scss // auto generated
├── webpack
│ ├── config
│ │ ├── base.js
│ │ ├── dev.js
│ │ └── pro.js
│ ├── plugins
│ │ └── sprites // an example for webpack plugin
│ │ ├── index.js
│ │ ├── scssTemp.js // template to generate _sprite.scss
│ │ └── jsTemp.js // template to generate sprite.js
│ └── serv.js
├── webpack-start.iml
└── yarn.lock
Usage:
$ npx wp --help
Usage
$ wp [...options]
Options
--config A path to a webpack config file
--config.{name} A path to a webpack config file, and the config name to run
--help Displays this message
--silent Instruct the CLI to produce no console output
--version Displays webpack-nano and webpack versions
Examples
$ wp
$ wp --help
$ wp --config webpack.config.js
$ wp --config.serve webpack.config.js
Here is an example for how to write a webpack plugin.
Usage:
// webpack config
new SpritesPlugin({
scssPath: '_sprite.scss', // default
jsPath: '_sprite.scss', // default
base: './src/styles', // default
source: {
'../assets/images/sp': // output ./src/styles/assets/images/sp.png
'../assets/images/sprite/*.png' // target files or dirs
},
}),
// scss file
.c{
@include sprite($logo02,30px)
}
.d{
@include sprite($logo02)
}
// css output
.c {
background-size: 126.66667% auto;
width: 30px;
height: 30.33333px
}
.c, .d {
background-image: url(../images/sp.3d69411c.png);
background-position: 0 0
}
.d {
width: 90px;
height: 91px
}