八：如何独立打包成样式文件

    有时候我们不想把样式打在脚本中，而是想独立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>
复制代码

在页面上运行以下；即可看到效果：我们可以看下请求数：

【我是操作没成功】