最简单搭建webpack随便创建一个文件夹进入 npm init 一路回车进入文件下载相关webpack的资源 npm

随便创建一个文件夹进入

npm init 一路回车

进入文件下载相关webpack的资源

npm i -D webpack

npm i -D webpack-cli

npm i -D webpack-dev-server

npm i -D html-webpack-plugin 生成html文件

创建src文件夹下main.js

随便打印点东西console.log(123);

创建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>Document</title>
</head>
<body>
    <div>1231232132</div>
</body>
</html>

创建webpack.config.js文件

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')

module.exports={
    entry:'./src/main.js',
    output:{
        path:resolve(__dirname,'build'),
        filename:'learn'
    }, 
    plugins:[
        new htmlWebpackPlugin({
            template:'./public/index.html'
        })
    ],
    devServer:{
        open:true
    },
    mode:'development'
}

修改package.json文件

添加

"scripts": {
    "dev":"webpack server"
  },

最后开干

npm run dev

运行成功

目录结构大体是这样式的

就这样吧