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

Evelynzzz
309 阅读3分钟
优化前

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 %}
<!doctype html>
<html lang="en">
<head>
	......
</head>
<body>
......
{% render_bundle 'vendors' %}
{% render_bundle 'app' %}
</body>
</html>

修改后：

{% load render_bundle from webpack_loader %}
<!doctype html>
<html lang="en">
<head>
	{% render_bundle 'app' 'css' %}
</head>
<body>
<div id="app"></div>
{% render_bundle 'vendors' %}
{% render_bundle 'app' 'js' %}
</body>
</html>

具体修改：先指定在<body>中只引入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 <script> and <link> tags needed in your template. render_bundle also takes a second argument which can be a file extension to match. This is useful when you want to render different types for files in separately.

也就是说， render_bundle会在template中生成与bundle对应的 js 和 css 文件的 <script>和 <link> 标签。

而第二个可选参数用于指定引入的文件类型，如果不指定的话，默认两个都会在指定位置生成。比如在分离CSS文件之后，如果不修改templates，生成的HTML部分如下图：

不指定文件类型参数时，在<body>末尾引入

踩过的坑

  1. 注意CSS文件的名称

在这种情况下，只能是app.css或vendors.css。也就是必须跟打包输出的bundle中的其中一个同名。否则在打开页面时会提示找到不到名称为XXX的bundle之类的错误。

  1. 不要在template中直接用<link>标签引入导出的样式文件

一开始我尝试直接用<link>标签引入导出的样式文件，但是这样没有成功，因为webpack开发模式和生产模式请求静态文件的路径不同。而django-webpack-loader会帮我们根据配置生成不同的路径。 比如{% render_bundle 'app' 'css' %}在开发模式时会生成如下内容：

<link type="text/css" href="http://localhost:3000/assets/bundles/app.css" rel="stylesheet"/>

而在生产模式时会生成：

<link type="text/css" href="/static/bundles/prod/app.css" rel="stylesheet"/>

这些路径对应开发模式的webpack配置：

config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/';

和 Django 配置文件中指定的静态文件目录STATICFILES_DIRS，和bundle目录WEBPACK_LOADER：

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/prod/',  # change when production
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json'),  # change when production
    }
}
avatar
文章
阅读
粉丝