HtmlWebpackPlugin
new HtmlWebpackPlugin({
isDev v: process.env.NODE_ENV === 'development',
filename: 'index.html',
template: './client/views/index.ejs',
})
https://webpack.docschina.org/plugins/html-webpack-plugin/#root
当 webpack 打包时，会创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件中
- template：指定你生成的文件依赖哪一个 html 文件模板，模板类型可以是 html、ejs 等
//index.ejs
<!DOCTYPE html>
<html lang="zh">
<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>xxxxxx</title>
</head>
<body class="pbm">
<div id="app"></div>
</body>
<% if (htmlWebpackPlugin.options.isDev){ %>
<script src="https://cdn-health.xx.com/library/react/v16.10.2/react.development.js"></script>
<script src="https://cdn-health.xx.com/library/react-dom/v16.10.2/react-dom.development.js"></script>
<script src="https://cdn-health.xx.com/library/react-router/v5.1.2/react-router-dom.js"></script>
<% } else { %>
<script src="https://cdn-health.xx.com/library/react/v16.10.2/react.production.min.js"></script>
<script src="https://cdn-health.xx.com/library/react-dom/v16.10.2/react-dom.production.min.js"></script>
<script src="https://cdn-health.xx.com/library/react-router/v5.1.2/react-router-dom.min.js"></script>
<% } %>
</html>
MiniCssExtractPlugin
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8]css",
chunkFilename: "[id].[contenthash:8].css"
})
https://webpack.docschina.org/plugins/mini-css-extract-plugin#root
会生成 css 文件，并在 html 中以 <link> 方式进行引入，使用方法如下
