Webpack打包css到js中css样式不起效果

今天通过修改webpack的moudle.rules属性来将css打包到js中，其实就是去除了MiniCssExtractPlugin.loader。

这样能够实现打包效果，但却在项目中引用时发现css无法加载到dom上。

通过分析打包后的js文件，可以发现css代码都是被exports.push到exports变量中了。

exports.push([module.i, "/* left-menu */\n.left-nav {\n  background: #f0f2fa;\n  z-index: 100;\n  height: 100%;\n  transition: width .2s linear;\n}\n........])

打开调试面板，发现dom节点上没有style，也就是说js并没有将css代码插入到style标签中。再分析一下我们的打包loader，发现是缺少了style-loader…