首先我们通过一个简单的例子，让webpack去解析es module
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack初识</title>
</head>
<body>
</body>
</html>
<script src="./index.js"></script>
- index.js
import Header from './header';
import Content from './content';
import Footer from './footer';
new Header()
new Content()
new Footer()
- header.js
function Header() {
var dom = document.querySelector('body');
var el = document.createElement('div');
el.innerText = 'Header';
dom.append(el);
}
export default Header;
- content.js
function Content() {
var dom = document.querySelector('body');
var el = document.createElement('div');
el.innerText = 'Content';
dom.append(el);
}
export default Content;
- footer.js
function Footer() {
var dom = document.querySelector('body');
var el = document.createElement('div');
el.innerText = 'Footer';
dom.append(el);
}
export default Footer;
好了，都写完之后，运行你会发现报错，原因是es module 本身浏览器是无法识别的，此时我们就得需要webpack 来解决这个问题，让浏览器可以识别我们的语法
# 安装webpack-cli
npm init
npm install webpack webpack-cli --D
然后对index.js 进行编译
npx webpack index.js
此时会在根目录输入一个webpack处理好的文件，/dist/main.js。替换html中的index.js，然后就可以访问了。浏览器就可以识别es module了。讲到这块，大家应该对webpack有了一个初步的认识，接下来我们再一起探讨其中的奥妙。
网友评论