Skip to content

Latest commit

 

History

History
64 lines (43 loc) · 1.67 KB

Extract text webpack plugin插件使用详情.md

File metadata and controls

64 lines (43 loc) · 1.67 KB
layout title date tags comments
post
Extract text webpack plugin插件使用详情
2016/5/3 20:46:25
webpack
true

Extract-text-webpack-plugin插件能从webpack打包文件中提取内容并变成文件。

优点

  • 有更少的style标签
  • css具体source-map (如果css打包在js文件里是没有source-map)
  • css文件能并行请求
  • 更快运行时间（更少代码和Dom操作）

缺点

  • 更多Http请求
  • 更长时间打包编译时间
  • 更多配置选项
  • 没有热替换

使用

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

  • 在webpack.config.js中添加：var ExtractTextPlugin = require("extract-text-webpack-plugin");
  • 在plugins添加：new ExtractTextPlugin("[name].css")
  • 在module loaders中添加：{ test: /.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")}

extract方法使用

extract([notExtractLoader], loader, [options])

  • notExtractLoader: 指定不提取的loader
  • loader：需要提取内容loader
  • options
    • publicPath：设置发布路径，这个参数会覆盖output的publicPath参数；这个参数非常有用，可以改变css文件里资源引用路径，当css文件路径发生改变，不会出现资源找不到的情况；

遗留问题

Extract-text-webpack-plugin不能和loader同时操作相同后缀名的文件；例如：

module: {
    loaders: [

       { test: /.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader", {publicPath: "./"})},
        { test: /.scss/, loader: "style-loader!css-loader!sass-loader"},
    ]
}

拓展阅读：

  • extract-text-webpack-plugin
  • css文件只能合并的问题