初识 Webpack (四) 解析stylus文件，将css内容单独分离（loader和plugs配置）

 

目录

✦ 前言

✦ 文章

➬ 文档

➬ 遇到的问题

➬ 配置和实战 

✦ 本章节学习内容

✔ 基本代码和目录结构

➊ 模块安装

➋ 添加html-webpack-plugin打包

➌ 添加extract-text-webpack-plugin打包

✦ 整体代码

✦ 总结

---

• ✦ 前言

普通webpack的打包css被打包到了js文件中，以字符串的形式存在，并且整个bundle.js比平常大了不少！

而现在利用webpack来管理css（合并），并增加hash（性能优化），当前项目使用 webpack -version 版本为4.41.5。开始选择的插件是extract-text-webpack-plugin，安装命令如下：

如果使用ExtractTextWebpackPlugin插件，打包并查看public，可以发现，bundle.js文件恢复了正常，并多出来一个[name].css文件。

并且配合HtmlWebpackPlugin插件则自动插入index.html中。

• ✦ 文章

• ➬ 文档

1. 开发者手册：https://cloud.tencent.com/developer/section/1477560
2. npm extract-text-webpack-plugin 文档

• ➬ 遇到的问题

1. webpack为什么要配置ExtractTextPlugin插件
2. ExtractTextPlugin.extract Unexpected token ':'  报错解决办法（错误picture1）
3. Cannot find module 'webpack/lib/node/NodeTemplatePlugin'  报错解决办法（错误picture2） / 或者【npm install --save-dev webpack 博客】
4. Tapable.plugin is deprecated. Use new API on `.hoo