Webpack模块打包工具。
一、项目原始目录结构
1 2 3 4 5 6 7 8 9
| |-- index.html |-- index.js |-- js |-- header.js |-- content.js |-- footer.js |-- img |-- abc.jpg |-- abc.png
|
1 2 3 4 5 6 7 8 9 10 11 12 13
| <!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>Webpack</title> </head> <body> <h1>Webpack初识</h1> <section id="root"></section> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| function Header() { var dom = document.getElementById('root'); var header = document.createElement('div'); header.innerText = 'Header'; dom.append(header); } export default Header;
function Content() { var dom = document.getElementById('root'); var content = document.createElement('div'); content.innerText = 'Content'; dom.append(content); } export default Content;
function Footer() { var dom = document.getElementById('root'); var footer = document.createElement('div'); footer.innerText = 'Footer'; dom.append(footer); } export default Footer;
var Header = require('./js/header'); var Content = require('./js/content'); var Footer = require('./js/footer');
new Header(); new Content(); new Footer();
|
二、项目
1、初识化项目:在根目录下执行npm init
,即可生成 package.json
文件;
2、安装webpack
npm install webpack --save
npmt install webpack-cli --save
3、执行打包命令
npx webpack index.js
4、执行完 3 后即可看到 dist
文件夹,添加 dist/main.js
进 index.html
。
三、成果