webpack学习(四)extract-text-webpack-plugin插件

时间:2022-05-07
本文章向大家介绍webpack学习(四)extract-text-webpack-plugin插件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

二、extract-text-webpack-plugin插件

从 bundle 中提取文本(CSS)到单独的文件

安装

npm install extract-text-webpack-plugin --save-dev 

用法

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

 它会将所有的入口 chunk(entry chunks)中引用的 *.css,移动到独立分离的 CSS 文件。

因此,你的样式将不再内嵌到 JS bundle 中,而是会放到一个单独的 CSS 文件(即 styles.css)当中。

如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。