2、打开浏览器的开发模式，一般按快捷键f12就可以打开，以google浏览器举例：点击标签resource，然后在对应的资源文件中找到自己需要的文件再右键save即可。
将css代码的<style type="text/css">和</style>标识去掉，取其中间部分并保存为1.css将script代码的<script type="text/javascript">和</script>标识去掉，取其中间部分保存为1.js
在你需要调用样式的页面中插入以下语句（一般在网页的head标识之间插入）：
<link rel="stylesheet" type="text/css" href="1.css">
在你需要调用脚本的页面中适当位置插入以下语句：
<script language="javascript" src="1.js"></script>
记得将这三个文件都放在一个目录中哦，不然你得写对路径
mini-css-extract-plugin 在 webpack4 中代替 extract-text-webpack-plugin ，此插件是 将 CSS 样式提取到单独的文件 中。 它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。即通过 JS 文件中 import 进来的样式文件。它支持 CSS 和 SourceMaps 的按需加载。
是建立在新的 webpack v4 功能（模块类型）之上，并且需要在 webpack 4 版本才能工作。
相比 extract-text-webpack-plugin ：
基本配置如下（webpack.config.js）：
高级配置如下（既可以在开发中使用 HMR，也可以在生成版本的文件中提取样式）：
生产环境优化压缩（production）
缩小输出，要使用像 optimize-css-assets-webpack-plugin 这样的插件。 设置 optimization.minimizer 会覆盖 webpack 提供的默认值，因此确保要指定 JS minimalizer ：
将所有 CSS 样式提取到单个文件中，与 extract-text-webpack-plugin 类似，可以使用 optimization.splitChunks.cacheGroups 。
还可以根据 webpack 的 entry name 来提取CSS，这对你动态引入路由，却想依据 entry 保存打包的 CSS 的情况十分有用。这也解决了 ExtractTextPlugin 中 CSS 重复的问题。
特别注意 ：
