ExtractTextPlugin 抽出CSS代码

ExtractTextPlugin：关于这个插件的使用直接看webpack的文档就好了，很容易；

 

这里主要就是记录一下filename

 

filename: filename 参数可以是 Function。它通过 getPath 来处理格式，如 css/[name].css，并返回真实的文件名，你可以用 css 替换 css/js，你会得到新的路径 css/a.css；

entry: { 
    'js/a': "./a" 
}, 
plugins: [ 
    new ExtractTextPlugin({ 
        filename: (getPath) => { 
            return getPath('css/[name].css').replace('css/js', 'css'); 
        }, 
        allChunks: true 
    }) 
]

 

可以接受函数，说明就可以很自由的去控制提取出来的CSS的文件名和路径；

函数中的参数getPath：看文档可以知道是一个函数，里面接受一个字符串；返回值是一个字符串；

比如：getPath('css/[name].css') => 返回的是 css/js/a.css

这里有个重点：[name] 是什么：它是 entry 的 key 值；

注意：一个入口只打包一个css文件，也就是说如果你的a.js 里面引入了多个css文件，那么它只会被打包成一个css；如果有多入口的话，那么filename后面的函数就会被执行多次；

好了，这是一个重点，可以利用entry的key值来做文件打包后的文件夹分布；

其实引申一下，webpack中的很多[name]都是entry的key值;

所以：控制好entry的key值，就可以做好打包后的文件分布

 

有同学可能会说，干嘛要 return getPath('css/[name].css')

我直接写 return 'css/[name].css' 不行吗？

答案是不行的，直接这么写返回那么生成出来的文件名就是 [name].css

也就是说 [name] 这个占位符不会被替换成文件名；所以上面那个函数就是用来做转换的；

 

既然知道了是用来做转换的，也知道了它的返回值是字符串，那么我们就可以自由控制它的输出路径了；要怎么控制就随便玩了；

 

例如：

new ExtractTextPlugin({

    filename: function (getPath) {

        var __path = getPath('[name].css');

        var __arr = __path.split('.');

        if (__arr[0] == 'common') {

            __path = getPath('common/css/[name].css');

        } else {

            __path = getPath('css/[name].css');

        }

        return __path;

    }

})

我可以把公共的样式放在common中，而其他的样式放在css中，具体看业务情况，这里主要是提供一个方法；

 

最后说明一下，如果用了CommonsChunkPlugin这个插件，那么CommonsChunkPlugin会把公共的css都打包到一个css中去的，但是在CommonsChunkPlugin中是无法配置公共css的输入目录的；

 

仅此笔记，如果错误还望指正一下；