webpack+react新建项目（2）--增加模板和自动更新

最新推荐文章于 2024-09-14 14:28:18 发布

「已注销」

最新推荐文章于 2024-09-14 14:28:18 发布

阅读量476

点赞数

分类专栏： webpack react 文章标签： webpack React 开发环境 html-webpack-plugin webpack-dev-server

本文链接：https://blog.csdn.net/weixin_54012475/article/details/122869957

版权

react 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

webpack

4 篇文章 0 订阅

订阅专栏

文章目录

1，安装html-webpack-plugin和webpack-dev-server

npm install html-webpack-plugin webpack-dev-server --save-dev

2，创建模板文件

在根目录下新建public文件夹，然后在文件夹下新建index.html文件

<!DOCTYPE html>
<html lang="zh-cn">
<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>react admin</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

3，修改webpack.config.js文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)/,
        use: "babel-loader",
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  devServer: {
    open: true,
  }
};