【Webpack2+Django】使用extract-text-webpack-plugin分离样式文件

优化前

webpack配置了两个入口，一个是app.js，一个是vendors（包括 react 等第三方插件）。打包生成的JS文件对应有两个：app-[hash].js和vendors.js。

这种情况下，样式文件都被打包到了 app-[hash].js里面。而且这时候我们还没有做按需加载，所以这个文件会比较大，网页初次加载的时候花的时间很长。

优化后

使用插件 extract-text-webpack-plugin把样式从JS文件中分离出来，生成一个单独的CSS文件（竟然快1Mb了...），再引入到 HTML 中。打开页面的时候，app-[hash].js，vendors.js和这个CSS文件会被异步加载，节省时间。

优化过程

首先安装插件：
npm install --save-dev extract-text-webpack-plugin
修改 webpack 配置文件，先添加plugin：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
... ...
  plugins: [
      ... ...
      new ExtractTextPlugin({ //样式文件单独打包
        filename: "app.css",  //指定生成的文件名称
        disable: false,  //是否禁用此插件
        allChunks: true
      })
   ],
}

注意，如果是 Django 项目，样式名称需要跟打包生成的其中一个模块名一样，这样才能在 templates中引入。比如这里我们命名为app.css。
然后修改CSS和LESS文件的loader：

module: {
    rules:[
        {
          test: /\.css$/, 
          use: ExtractTextPlugin.extract({
            fallback:'style-loader',
            use:['css-loader', 'postcss-loader'],
          })
        },
        {
          test: /\.less$/i,
          use: ExtractTextPlugin.extract({
            fallback:'style-loader',
            use:['css-loader', 'less-loader'],
          })
        },
        ... ...
    ] // add all common loaders here
},

这是 Webpack 2 的配置了。Webpack 1 的 loader 格式跟上面的有一点区别。
配置修改完成了，再打包就会出现一个 app.css的文件。

接下来只需要在HTML头部引入（如果不在意引入css的位置可以忽略以下的步骤）。

我们后端使用的Django框架，所以需要在templates中引入。
修改前的 template：

{% load render_bundle from webpack_loader %}



    ......


......
{% render_bundle 'vendors' %}
{% render_bundle 'app' %}

修改后：

{% load render_bundle from webpack_loader %}



    {% render_bundle 'app' 'css' %}



{% render_bundle 'vendors' %}
{% render_bundle 'app' 'js' %}

具体修改：先指定在中只引入app bundle 的 js 文件：
{% render_bundle 'app' 'js' %}
然后在head中引入app bundle对应的 css 文件：
{% render_bundle 'app' 'css' %}

到这就ok了。

在django-webpack-loader的使用说明中写到了这个用法：

render_bundle will render the proper