安装node环境
webpack本身就是使用node.js写的
我们安装完node环境的同时也安装完成npm
安装cnpm
因为npm拉取的镜像是国外的比较慢,所以我们统一使用cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack相关文件
cnpm install -g webpack
cnpm i -g webpack-cli
-g 即global,全局安装
i install简写
初次实验
index.html引用index1.js
index1.js引用index2.js
index.html
<!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>
</head>
<body>
<script type="text/javascript" src="./index1.js" charset="utf-8"></script>
</body>
</html>
index1.js
let info = require("./index2.js");
document.write(`name:${info.name} age:${info.age}`);
index2.js
module.exports = {
name:"xuwei",
age:18
}
我们在浏览器中打开index.html
毫无疑问,报错了
‘
因为浏览器不认识JSX语法,所以也就不知道require是什么
修正问题
第一步:添加webpack.config.js文件
module.exports = {
mode:"development",
entry:"./index1.js",
output:{
path:__dirname,
filename:"bundle.js"
},
};
这个配置文件可以指导webpack如何进行工作
具体参数什么含义及如何编写,建议到官网进行查看 https://webpack.js.org/
第二步:运行webpack命令
PS E:\webpack> webpack
Hash: cd4cc87fdad1ca82b37d
Version: webpack 4.29.6
Time: 99ms
Built at: 2019-04-04 10:38:54
Asset Size Chunks Chunk Names
bundle.js 4.17 KiB main [emitted] main
Entrypoint main = bundle.js
[./index1.js] 90 bytes {main} [built]
[./index2.js] 52 bytes {main} [built]
PS E:\webpack>
可以看到,生成了一个bundle.js文件
并不能看懂这个文件里写了什么~~
第三步:修改index.html中引用的js
将原来的index1.js 修改为bundle.js即可
webpack编译index1.js,把JSX转化为浏览器可以识别的javascript语法,即生成的文件bundle.js
经过上面的三步,在重新在浏览器中打开 index.html
即可看到运行成功