先下载安装node
选择Windows Installer (.msi) 64位下载安装，默认所有选项
会自动把node , npm加入环境变量path
验证安装成功
node -v
v8.11.0
npm -v
5.6.0新建webpack项目目录D:\proj\webpack\webpack_test
cd /d D:\proj\webpack\webpack_test
npm init
npm install --save-dev webpack完成后，当前目录下结构
node_modules 文件夹
package.json
package-lock.json创建项目文件夹与文件
目录结构
app 文件夹
--Greeter.js app文件夹内
--main.js
public 文件夹
--index.html各文件内容
Greeter.js
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};main.js
//main.js
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>编译
node_modules\.bin\webpack app\main.js --output-filename bundle.js --output-path public\ --mode development输出结果
Hash: 29018061dbc683c189c9
Version: webpack 4.4.1
Time: 114ms
Built at: 2018-3-30 08:46:37
Asset Size Chunks Chunk Names
bundle.js 3.38 KiB main [emitted] main
Entrypoint main = bundle.js
[./app/Greeter.js] 161 bytes {main} [built]
[./app/main.js] 107 bytes {main} [built]会生成文件bundle.js
public
--bundle.js直接浏览器在浏览器打开index.html
file:///D:/proj/webpack/webpack_test/public/index.html显示
Hi there and greetings!