初始化文件
// html文件
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
// index.js通过import引入其他js文件
import Header from './header'
import Sidebar from './sidebar'
import Content from './content'
new Header()
new Sidebar()
new Content()
// 其他js文件
export default function Header () {
let dom = document.getElementById('root')
let child = document.createElement('div')
child.innerText = 'header'
dom.appendChild(child)
}
webpack是模块打包工具
- 这个时候打开html文件是无法显示的，因为浏览器不理解import这些语法，因此我们需要webpack
// 安装webpack 和 webpack-cli
npm init
npm install webpack webpack-cli -D
npx webpack index.js
-
npx 代表使用当前node_modules里面的webpack,用webpack 打包index.js文件
-
打包后生产dist文件夹，并且生成main.js文件
-
可以指定打包的输出文件
npx webpack index.js -o build.js
- 还有更多配置参数可参考文档
html引入生成的js文件
<body>
<div id="root"></div>
<script src="./dist/main.js"></script>
</body>
html能够正常显示
网友评论