1.创建一个空文件夹;
2.在文件夹下打开终端,运行 npm init 初始化项目，生成package.json;
3.项目文件夹下新建public文件夹，并在文件夹下新建一个index.html文件;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<div id="app"></div>
</body>
<script type="module" src="../src/index.js"></script>
</html>
4.创建src文件夹用来存放项目的逻辑代码，并在src文件夹下新建index.js作为项目的入口
5.安装webpack: npm install webpack --save-dev 和webpack-cli：npm i webpack webpack-cli
6.在根目录下创建webpack.config.js文件并写入:
const { resolve } = require('path')
module.exports = {
// 开发 模式
mode: 'development',
// 入口
entry: './src/index.js',
// 打包到什么文件
output: {
filename: 'bundle.js',
path: resolve(__dirname, './dist')
}
}
7.安装webpack-dev-server：npm i webpack-dev-server -D ,在package.json中配置脚本:
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},8.经过上述操作，就可以通过npm run serve将项目运行在本地服务,通过open live server来打开html
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
