1、新建文件夹demo
mkdir demo
2、新建package.json文件
npm init
3、安装webpack、webpack-cli、webpack-dev-server
npm install webpack webpack-cli webpack-dev-server -D
4、配置webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(\_\_dirname, 'dist'),
filename: 'bundle.js',
},
devServer: {
static: './dist',
port: '8088'
}
};
5、配置package.json文件,增加scrips部分
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack serve --open --mode=development",
"build": "webpack"
}
6、新建index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
7、编辑js内容
console.log('Hello World')
8、编译
yarn build
9、运行
yarn start
10、访问链接,输出Hello World
http://localhost:8088/