使用webpack 5搭建react应用（二）devServer

我们在上一节的基础上，已经可以开发出react应用了，但是不可能每次文件改动都要手动执行一次build，所以我们需要devServer

使用 html-webpack-plugin

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

修改webpack.config.js


const path = require('path')
const basePath = path.resolve(__dirname, 'src');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
   entry: './src/index.js',
   output: {
-    filename: '[name].js',
+    filename: '[name][chunkhash].js',
+    clean: true,
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+      title: 'webpack-react-demo'
+    })
+  ],

修改index.html，删除之前引用的js文件，html-webpack-plugin会自动帮我们引入

 </head>
 <body>
     <div id="app"></div>
-    <script src="./dist/main.js"></script>
 </body>
 </html>

运行 npm run build，发现dist文件中多了index.html文件，这个就是最终的打包文件

使用 webpack-dev-server

npm install --save-dev webpack-dev-server

修改webapck.config.js，新增devServer的配置


  devServer: {
    host: 'localhost',
    port: 9000
  },

修改package.json，新增dev命令

 "dev": "webpack-dev-server --open --hot"

运行 npm run dev，会自动帮我们打开浏览器，但是有报错

Compiled with problems:
X


WARNING

configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/


WARNING

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main6ecfc1b4187767b9b7a0.js (250 KiB)


WARNING

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (250 KiB)
      main6ecfc1b4187767b9b7a0.js


WARNING

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

报错说我们没有指定mode选项和文件过大
我们修改一下webpack.config.js指定一下mode

区分环境

安装cross-env

npm install cross-env --save-dev

修改package.json中的命令

"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack"

这样我们的mode就可以指定了


// wepack.config.js

mode: process.env.NODE_ENV,

npm run dev启动，自动打开localhost:9000

我们修改index.js ，页面也会自动更新

解决console warning

打开浏览器控制台发现有warning

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

意思是说render方法过时了，我们createRoot代替，需要修改一下index.js


 import React from 'react';
-import reactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 function App() {
   return <div className="App">first react webpack app</div>;
 }
 
-reactDOM.render(<App />, document.getElementById('app'));
+const appContainer = document.getElementById('app');
+const root = createRoot(appContainer);
+root.render(<App />);