webpack教程：如何从头开始设置 webpack 5( 四 ) _webpack

现在，重新构建时，项目中已经应用了Sass和PostCSS 。
开发每次进行更新时都要运行npm run build，站点越大，构建所需的时间就越长，这样就十分的烦琐。为此可以为 webpack 设置两种配置：

生产配置，用于最小化，优化和删除所有源映射
开发配置，该配置在服务器中运行webpack，每次更改都会更新，并具有源映射

开发模式下是在内存中运行所有内容，而不是构建一个dist文件，需要安装 webpack-dev-server
npm i -D webpack-dev-server出于演示目的，我们可以仅将开发配置添加到正在构建的当前webpack.config.js文件中并对其进行测试。但是，我们开发一般要创建两个配置文件：一个生产环境用的 mode: production，一个开发环境用的mode: development 。

const webpack = require('webpack')module.exports =  {  /* ... */  mode: 'development',  devServer: {    historyApiFallback: true,    contentBase: path.resolve(__dirname, './dist'),    open: true,    compress: true,    hot: true,    port: 8080,  },  plugins: [    /* ... */    // Only update what has changed on hot reload    new webpack.HotModuleReplacementPlugin(),  ],})

我们添加mode: development，并创建devServer属性，其中，默认端口将为8080，自动打开浏览器窗口，并使用hot-module-placement，这需要webpack.HotModuleReplacementPlugin插件。这样模块执行更新而无需完全重新加载页面-因此，如果你更新某些样式，则这些样式将发生变化，并且不用重新加载整个 JS ，大大加快了开发速度。
现在，可以使用webpack serve命令来启动项目。
package.json
"scripts": { "start": "webpack serve"}npm start运行此命令时，将在浏览器中自动弹出一个指向localhost：8080的链接。现在，您可以更新Sass和JavaScript，并观看其动态更新。
总结我用 Babel，Sass，PostCSS，生产优化和开发服务器创建了可用于生产的webpack 5样板，其中包含本文的所有内容，但会涉及更多细节。从这里，可以轻松设置React，Vue，Typescript或其他任何您想要的东西。
项目地址：webpack 5 boilerplate
【webpack教程：如何从头开始设置 webpack 5】看看它，摆弄它，享受它！