Webpack开发模式下CSS和JS未压缩、无法内联注入HTML问题

问题1：dev模式下CSS、JS未压缩的解决方法 #

webpack 4 仅在mode: 'production'时默认启用压缩逻辑，dev模式下默认跳过压缩步骤，你需要手动强制开启压缩：
修改webpack.config.js中的optimization配置项，添加minimize: true：

optimization: {
  minimize: true, // 强制所有模式下开启压缩
  minimizer: [new UglifyJsPlugin(), new OptimizeCSSAssetsPlugin()],
},

如果压缩时出现ES6语法相关报错，可以把uglifyjs-webpack-plugin替换为兼容性更好的terser-webpack-plugin（webpack4兼容版本即可）。

问题2：压缩资源内联注入HTML的解决方法 #

你当前使用的MiniCssExtractPlugin会将CSS抽离为独立外部文件，HtmlWebpackPlugin默认也只会插入外部资源引用，要实现内联需要做以下调整：

1. 安装适配webpack4的内联插件：

npm install html-webpack-inline-source-plugin@1.0.0-beta.2 --save-dev

2. 修改webpack配置：
   首先头部引入插件：

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

修改HtmlWebpackPlugin配置，添加内联规则：

new HtmlWebpackPlugin({
  title: "Rejaur Rahman | Web Developer",
  template: "src/index.html",
  inject: true,
  inlineSource: '.(js|css)$', // 匹配所有js、css文件进行内联
  minify: {
    removeComments: true,
    collapseWhitespace: true,
  },
}),

将内联插件添加到plugins数组中，注意要放在HtmlWebpackPlugin之后：

plugins: [
  new MiniCssExtractPlugin({
    filename: "assets/css/styles.css",
  }),
  // 上面修改后的HtmlWebpackPlugin配置
  new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
  // 其他原有插件保持不变
]

如果不需要保留单独导出的CSS、JS文件，可以进一步配置MiniCssExtractPlugin的文件名规则，或者将MiniCssExtractPlugin.loader替换为style-loader，实现CSS直接打包进JS bundle后统一内联。

内容的提问来源于stack exchange，提问作者mohsinali1317