webpack5基础devServer搭建

最新推荐文章于 2024-08-10 22:58:28 发布

原创最新推荐文章于 2024-08-10 22:58:28 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #webpack

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用npm初始化项目，配置webpack.config.js，包括入口、出口、开发服务器设置，并通过package.json定义脚本命令启动开发服务器。目录结构中包含index.html，引入了打包后的build.js。运行npm run dev启动服务，实现自动打开浏览器并展示页面。

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运行