本文主要是记录webpack的简单入门操作,希望对刚入门的t同行有所帮助。
第一步:安装webpack;
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
//webpack4还需要安装webpac-cli
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
第二步:开始前准备;
新建一个文件夹,命名不能是webpack,我命名的是webpack_demo;然后打开cmd,初始化项目:npm init;完成后,文件夹内新建如下文件:
webpack.config.js的内容为:
module.exports = {
entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/bundle.js" //打包后输出文件的文件名
},
devServer: {
// contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
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>
<div id="root"></div>
<script src="js/bundle.js"></script>
</body>
</html>
public/index.js的内容为:
var header = requ