webpack学习笔记(2)-ExtractTextWebpackPlugin的使用

[sevenCon]

前言

ExtractTextWebpackPlugin是用来提取公共代码的插件.
比方说把css的代码提取到一个文件, 方便单独缓存, css代码独立加载, 异步加载的模块等等. 但是实际在使用的过程中, 有些疑惑的地方.

• new ExtractTextWebpackPlugin({allChunk:true})里面的allChunk作用是什么?
• ExtractTextPlugin.extract里面的fallback什么时候生效?
• css或者less里面, 碰到import "./a/v/c.less", background:url(./../a.png)应该怎么配置打包的路径?
  自己对于这几个问题理解不是很到位.

安装ExtractTextWebpackPlugin

ExtractTextWebpackPlugin对webpack的版本很敏感, 注意安装的版本.

# for webpack 4
npm install –save-dev extract-text-webpack-plugin@next
# for webpack 3
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev [email protected]
# for webpack 1
npm install --save-dev [email protected]

css样式提取ExtractTextWebpackPlugin基本的配置

这里就简单的说下配置

wbepack 4.0以下用ExtractTextWebpackPlugin提取css

webpack4.0不再使用ExtractTextWebpackPlugin来提取公共的css,而是使用mini-css-extract-plugin 来提取, 但是webpack4的版本要用的话也可以npm install –save-dev extract-text-webpack-plugin@next, 需要安装4.0版本的ExtractTextWebpackPlugin.

我当前使用的版本是webpack-3.12.0

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

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

ExtractTextPlugin.extract的一些参数:

• fallback: 这个参数是在提取css失败的时候,使用的loader, 异步加载的组件, 通常是包括css, 而这个css的代码是通过less转化而来的, 如果该文件的没有提取到单独的css文件, 那么就会用style-loader处理.
• use: 用到的loader, 可以是数组, 转化顺序从后往前.所以这样是允许的use:['css-lodaer','less-loader'].
• publicPath:"/less/", 这是css文件路径里面的相对路径部分 , 比如 源码background:url(./1.jpg),打包出来的css则是background:url(./less/[contenthash].jpg).

实例

在allChunks:false的情况下, 公共的代码提取,使用了fallback:style-loader来处理没有成功提取的样式.

webpack.config.js的配置代码

index.js 入口的da打包代码

打包的结果allChunks:false

打包的结果allChunks:true

小结

所以allChunks:false为默认值, 默认是从entry的入口提取代码,但是不会提取异步加载的代码, allChunks:true则是提取所有模块的代码(包括异步加载的模块),到一个文件里面. fallback则是在异步代码加载的css代码没有被提取的情况下, 以style-loader的情况去加载异步组件的样式.

提取公共的css的插件书写方式

new ExtractTextPlugin({
    fileName:"[name].css", // [contenthash], [name], [hash]都是允许的
    allChunks:true // 是否从所有的chunk中提取
})

• allChunks: true, 表示是否从所有的chunk中提取代码(意味着异步加载的代码也会被提取).

CommonsChunkPlugin 的使用是提取多个entry的公共代码部分.当提取的代码携带ExtractTextPlugin.extract部分的话, 必须设置allChunks:true;

url()

在css书写的时候, 经常会携带background:url(...)的书写方式, 如果打包输出的图片资源位置修改的时候, 这个时候,应该怎么去配置?

在css-loader里面有一个配置

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [{
            loader: "css-loader", 
            options:{ url:true }
        }],
        publicPath:"/less/"
    })
}

url:true是默认值, 表示在less, css的代码书写中, 类似以下的写法, 都会自动转化为相对的路径. 除非是类似带cdn的绝对路径的除外.

import 'style.css' => require("./style.css");
background:url(a.png); => rquire("./a.png");
background:url(http://cnd.quanlincong.com/a.png); => rquire("http://cnd.quanlincong.com/a.png");

如果不希望代码的路径有任何变化的转化的话, 可以设置

url:false

禁止css资源转化的时候自动转化.

一般的情况下, 在css样式里面的引入的图片, 我想要打包到特定的路径, 比如放到一个目录里面assets

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader'],
          publicPath: '../images/'
        })
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              fallback: 'file-loader',
              limit: 8196,
              outputPath: 'images',
              publicPath: 'images'
            }
          }
        ]
      }
    ]
  },
  ...
}

这个时候需要配置url-loader, 在图片合适的大小情况下, 打包成base64, 超出特定的大小, 使用fallback配置的loader来处理,如果不写默认也是file-loader.

关于这个url-loader的使用

url-loader其实就是base64 + filr-loader的处理, 但是file-loader的插件需要自己额外安装.

• fallback: 'file-loader'代表在文件大小超出8196 bytes后, 使用的file-loader来加载资源, 此外后面的outputPath,publicPath配置都是给file-loader使用的.
  webpack在介绍这里的时候原话是这样的

The fallback loader will receive the same configuration options as url-loader.
意思就是url-loader的配置会传到file-loader里面, 所以file-loader的配置直接在里面options里面写.

• outputPath:'images', 意味这打包的图片资源都输出到./images路径下
• publicPath:'images', 定义引入图片的时候的路径前缀, 意味着通过extract-text-webpack-plugin提取的css代码的引入的图片资源, 如果extract-text-webpack-plugin里面定义了publicPath, 会被file-loader里面publicPath覆盖; 如果file-loader没有定义publicPath, 那么普通的图片资源引入的路径为[outputPath]/filename.png, 如果在extract-text-webpack-plugin定义了publicPath, 那么提取出来的图片样式引入的路径则是[publicPath]/[outputPath]/filename.png

extract-text-webpack-plugin和file-loader的publicPath例子

file-loader没有配置publicPath, 使用extract-text插件的publicPath

结果1,没有配置file-loader的publicPath

结果2,配置了file-loader的publicPath

结束

到这里, 终于弄懂了前言说的3个问题

• extract-text-webpack-plugin的allChunk:true, 是提取所有的chunk的css, 包括异步加载的css
• fallback什么时候什么生效? 在异步加载css的情况下, 没有成功提取css的时候, 会使用`fallback:'style-loader'来处理样式.
• 在css里面引用相对的图片资源, 优先使用extract-text-webpack-plugin的publicPath来添加前缀路径进行加载. 同时如果设置file-loader的话, 注意publicPath的路径会覆盖extract-text-webpack-plugin的publicPath;

https://webpack.js.org/plugins/extract-text-webpack-plugin/#root
https://webpack.js.org/plugins/mini-css-extract-plugin/