1. Install node.js
Because of webpack it is based on node.js
2. Create a new directory
3. Demand
List of color interlaced
4. Initialize
Use in the terminal npm init
command can automatically create this file package.json
npm init -y
5. Installation jquery
6. Install webpack
cnpm install -g webpack
7. Write main.js
// js的主要入口 import $ from 'jquery' $(function(){ $('li:odd').css('backgroundColor','blue') $('li:even').css('backgroundColor',function(){ return '#'+'ab2' }) })
8. Modify permissions
https://www.cnblogs.com/urwlcm/p/4333119.html
9. build main.js
webpack .\src\main.js -O .\dist\bundle.js
10. references
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../dist/main.js"></script> </head> <body> <ul> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> </ul> </body> </html>
11. Effect