八：如何独立打包成样式文件
有时候我们不想把样式打在脚本中，而是想独立css出来，然后在页面上外链css，这时候我们需要 extract-text-webpack-plugin 来帮忙：我们首先需要安装 extract-text-webpack-plugin：如下： npm install extract-text-webpack-plugin –save-dev 如下所示：
然后在目录下会生成如下：
现在我们需要看看webpack.config.js 配置变成如下：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 使用webpack打包
module.exports = {
entry: "./src/main.js",
output: {
filename: "build.js"
},
module: {
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{
test: /.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap!' +
'less?sourceMap'
)
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
// 内联css提取到单独的styles的css
plugins: [new ExtractTextPlugin('styles.css')]
};
配置完成后 我们gulp运行下即可，在build文件夹内会生成2个文件，一个是build.js 处理模块的文件 另一个就是我们的styles.css了；我们查看下如下所示：
接着在html文件这样引入即可：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/react.min.js"></script>
<link rel="stylesheet" href="build/styles.css"/>
</head>
<body>
<div id="content"></div>
</body>
</html>
在页面上运行以下；即可看到效果：我们可以看下请求数：
【我是操作没成功】