webpack5基础devServer搭建

最新推荐文章于 2024-03-29 23:23:25 发布

javscp_q

最新推荐文章于 2024-03-29 23:23:25 发布

阅读量320

点赞数 1

分类专栏： webpack 文章标签： javascript webpack

本文链接：https://blog.csdn.net/javcp_q/article/details/120822181

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

npm init

npm webpack@5 webpack-cli@3 webpack-dev-server@3 -D

创建webpack.config.js文件，配置如下：

const path = require("path");

module.exports = {
  // 入口
  entry: "./src/index.js",
  // 出口
  output: {
    // 虚拟打包路径
    publicPath: "js",
    // 打包后的文件名
    filename: "build.js"
  },
  mode: "development",
  devServer: {
    port: 8080,
    // 静态资源文件夹
    contentBase: "dist",
    open: true
  }
};

package.json定义脚本命令

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

目录结构如下图

/dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>
    <!-- 引入虚拟打包文件 -->
    <script src="/js/build.js"></script>
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

命令行npm run dev运行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

javscp_q

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack5基础devServer搭建

npm initnpm webpack@5 webpack-cli@3webpack-dev-server@3 -D创建webpack.config.js文件，配置如下：const path = require("path");module.exports = { // 入口 entry: "./src/index.js", // 出口 output: { // 虚拟打包路径 publicPath: "js", // 打包后的文件名 fil.
复制链接

扫一扫