1、初始化项目
npm init
这里注意一点，初始化项目时，不要起名为webpack。
2、安装webpack
这里是局部安装，我推荐这样做。
npm i -D webpack
3、修改package.json
加上 "start": "webpack --config webpack.config.js" 方便以后运行命令。
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5"
}
}
4、创建index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
5、创建工具函数show.js
// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;
6、创建JS 执行入口文件 main.js
// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');
7、根目录下创建webpack.config.js
const path = require('path');
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
}
};
8、执行命令
npm run start
欢迎关注我的公众号「前端历劫之路」
回复关键词电子书，即可获取近12本前端热门电子书。
回复关键词红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。
你还可以加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，欢迎你的加入。
作者：Vam的金豆之路
主要领域：前端开发
我的微信：maomin9761
微信公众号：前端历劫之路
