简单介绍
- webpack是一个打包工具，可以借助Babel将ES6、ES7、ES8转化成ES5的代码实现低版本浏览器的兼容,可以根据入口文件递归打包相关的依赖关系的文件;
- 可以实现监听文件的变化实时刷新浏览器;可以实现代码的合并、压缩;
- 可以实现将TypesScript转化为JavaScript，将Sass、Less转化为css;
- 实现将小图标转化为base64；
实现一个Hello World
npm 初始化
npm init -y
安装webpack依赖
npm install webpack webpack-cli --save-dev
结构目录
src
- index.html
- main.js
package.json
webpack.config.js
配置webapck打包入口和出口文件,webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
main.js
document.write('<h1>Hello World</h1>')
启动:打开当前目录的cmd
webpack
也可以在package.json中配置scripts用npm run build来编译
"scripts": {
"build": "webpack"
},