webpack5+webpack-cli4

最新推荐文章于 2024-06-19 21:56:52 发布

weixin_47330492

最新推荐文章于 2024-06-19 21:56:52 发布

阅读量938

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_47330492/article/details/124766425

版权

webpack5+webpack-cli4基础搭建

我用到的版本webpack: "5.72.1，webpack-cli:“4.9.2”

安装webpack+webpack-cli
npm install webpack webpack-cli
在文件夹中创建webpack.config.js.
其实webpack5把entry和output自动封装只需要配置devServer就好了，配置内容如下

module.exports={
//entry自动封装在src文件下的index.js，output封装为main.js
    devServer:{
        port:8090,
        //新建public文件夹，当项目启动时访问的地址为8090，内容为public文件夹下的index.html，如果不配置就会显示Cannot GET /
        static: {
            directory: "./public",
        },
    }
}

文件内容展示如下

//public文件夹下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>
  1111
</body>
<script src="main.js" type="text/javascript"></script>
</html>
//src文件夹下index.js
alert(111)

内容展示
配置package.json

{
  "name": "snabbdom",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  //将scripts内容添加 "dev":"webpack-dev-server"
  "scripts": {
    "dev":"webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "snabbdom": "^3.5.0"
  },
  "devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

启动项目npm run dev

weixin_47330492

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack5+webpack-cli4

webpack5+webpack-cli4基础搭建我用到的版本webpack: "5.72.1，webpack-cli:“4.9.2”安装webpack+webpack-clinpm install webpack webpack-cli在文件夹中创建webpack.config.js.其实webpack5把entry和output自动封装只需要配置devServer就好了，配置内容如下module.exports={//entry自动封装在src文件下的index.js，output封装
复制链接

扫一扫