extract-text-webpack-plugin用法

wangtdgoodluck 发布于2019-08-23 15:10 / 2283人阅读

摘要：一背景最近在做一个项目，项目本身是用创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的分别进行文件打包。于是开始研究插件。仅限高级用法默认情况下，自动生成结果文件的文件名。

一背景
最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。
二插件介绍
打包样式有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中，并且插入到head标签里。另一种就是使用extract-text-webpack-plugin插件，将样式文件多带带打包，打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。
三插件使用
1 插件安装：

# for webpack 3 
npm install --save-dev extract-text-webpack-plugin
# for webpack 2 
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1 
npm install --save-dev extract-text-webpack-plugin@1.0.1

2 插件使用
在webpack.config.js中引入

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

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader", // 编译后用什么loader来提取css文件
          use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

四 API

new ExtractTextPlugin([id: string], filename: string, [options])

id此插件实例的唯一标识。（仅限高级用法;默认情况下，自动生成）

filename结果文件的文件名。可能包含[name]，[id]和[contenthash]。
[name] 块的名称
[id] 块的标识
[contenthash] 提取文件内容的哈希值

options

allChunks 从所有其他块中提取（默认情况下，它仅从初始块中提取）

disable 禁用插件

ExtractTextPlugin.extract([notExtractLoader], loader, [options]
从现有加载器创建提取加载器。

notExtractLoader（可选）在未提取css时应使用的加载程序（即在其他块中时allChunks: false）

loader 应该用于将资源转换为css导出模块的加载器。

options
publicPath覆盖publicPath此加载程序的设置。

五扩展
该实例其实还有一个扩展函数。如果你有多个ExtractTextPlugin，你应该使用它。

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

// multiple extract instances
let extractCSS = new ExtractTextPlugin("stylesheets/[name].css");
let extractLESS = new ExtractTextPlugin("stylesheets/[name].less");

module.exports = {
  ...
  module: {
    loaders: [
      {test: /.scss$/i, loader: extractCSS.extract(["css","sass"])},
      {test: /.less$/i, loader: extractLESS.extract(["css","less"])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

GPU云服务器云服务器嵌套用法数组用法通知用法变量用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101625.html

如何使用 extract-text-webpack-plugin 导出多个文件

摘要：注意字段的用法以上的功能有一个致命弊端每次添加包时，都需要重新修改添加包会让所有模块恢复默认状态，临时用是没问题的。最近写 Vue 遇到了问题，来自于这里自定义块；简单来说，我想和官方教程一样，在 .vue 文件中包含一个 docs 的标签，像下面这样： component.vue ## This is an Example component. {{msg}} ...

yankeys 2019-08-26 11:34 评论0 收藏0
从零开始的webpack生活-0x015：ExtractTextWebpackPlugin分离样式

摘要：概述上一章讲的是，这一章讲的是依旧是没有任何关系。配合插件自动插入修改配置打包并查看它以的形式被插入头部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，请查阅关于章节资源源代码 0x001 概述上一章讲的是Dll，这一章讲的是ExtractTextWebpackPlugin,依旧是没有任何关系。 0x002 插件介绍这个插件用来将css导出到单独文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 评论0 收藏0
Webpack中hash的用法

摘要：在的配置项中，可能会见到这样的字符。的情况的可以指定。值是特定于整个构建过程的。。因此，以上两个值中更推荐的是。中的则和前面的一样，指定了结果的截取长度。的情况被引用的通过来得到带的文件。所以，这可能并不是我们想要的。在webpack的配置项中，可能会见到hash这样的字符。当存在hash配置的时候，webpack的输出将可以得到形如这样的文件： page1_bundle_54e8...

苏丹 2019-08-20 18:09 评论0 收藏0
react+webpack项目常用的插件(plugins)

一、HtmlWebpackPlugin使用： npm install html-webpack-plugin --save-dev 解释：这个插件是简化创建生成html（h5）文件用的，如果你引入的文件带有hash值的话，这个尤为的有用，不需要手动去更改引入的文件名！默认生成的是index.html,基本用法为： var HtmlWebpackPlugin = require(html-webp...

cyixlq 2019-08-20 15:52 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

赵连江 2019-08-29 16:36 评论0 收藏0