从零开始的webpack生活-0x015：ExtractTextWebpackPlugin分离样式

最新推荐文章于 2025-12-05 15:41:59 发布

转载最新推荐文章于 2025-12-05 15:41:59 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011884725

文章标签：

#webpack #开发工具 #javascript #ViewUI

本文介绍如何使用ExtractTextWebpackPlugin插件将CSS从JS中分离到独立文件。通过具体示例展示了不同场景下的配置方法，包括基本使用、配合HtmlWebpackPlugin自动插入CSS链接及多入口文件打包。

0x001 概述

上一章讲的是Dll，这一章讲的是ExtractTextWebpackPlugin,依旧是没有任何关系。

0x002 插件介绍

这个插件用来将css导出到单独文件

0x003 栗子-不使用该插件的情况

这次涉及到loader的使用，可以暂时忽略这方面配置

初始化项目

$ mkdir 0x008-extract-text-webpack-plugin
$ cd 0x008-extract-text-webpack-plugin
$ cnpm init -y
$ cnpm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev

配置webpack，先不使用插件

$ vim webpack.config.js
// webpack.config.js
const path    = require('path');
const webpack = require('webpack');

module.exports = {
    entry  : {
        'index': ['./src/index.js']
    },
    output : {
        path    : path.join(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module : {
        rules: [
            {
                test: /\.css$/,
                use:[
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            }
        ]
    }
};

添加入口文件和样式文件

$ vim ./src/index.js
// ./src/index.js
require('./../style2.css')

$ vim style1.css
p{
    color: red;
}
$ vim style2.css
p{
    font-size: 30px;
}

打包并查看打包结果index.bundle.js，可以发现，css被打包到了js里面，以字符串的形式存在，并且整个index.bundle.js比平常打了不少。

// module
exports.push([module.i, "p{\n    color: red;\n}", ""]);

// exports

此时如果有html引用该js

$ vim ./src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./../dist/index.bundle.js"></script>
</head>
<body>
<p>text</p>
</body>
</html>

5 浏览器打开index.html，就会发现css以style的形式被插到了head

0x004 使用该插件

修改配置

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

module.exports = {
    entry  : {
        'index': ['./src/index.js']
    },
    output : {
        path    : path.join(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module : {
        rules: [
            {
                test: /\.css$/,
                // use:[
                //     { loader: "style-loader" },
                //     { loader: "css-loader" }
                // ]
                use : ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use     : "css-loader"
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
    ]
};

打包并查看dist，可以发现，index.bundle.js文件恢复了正常，并且多出来一个style.css文件。
```
$ webpack
// ./dist/style.css
p{
    color: red;
}p{
    font-size: 30px;
}
```

0x005 配合`HtmlWebpackPlugin`插件自动插入`index.html`

修改配置

const path              = require('path');
const webpack           = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin   = require('html-webpack-plugin');

module.exports = {
    entry  : {
        'index': ['./src/index.js']
    },
    output : {
        path    : path.join(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module : {
        rules: [
            {
                test: /\.css$/,
                // use:[
                //     { loader: "style-loader" },
                //     { loader: "css-loader" }
                // ]
                use : ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use     : "css-loader"
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            title   : 'extract-text-webpack-plugin',
            filename: 'index.html',
            template: path.resolve(__dirname, 'src/index.html'),
            inject  : 'head'
        })
    ]
};

打包并查看./dist/index.html,它以link的形式被插入头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="styles.css" rel="stylesheet">
    <script type="text/javascript" src="index.bundle.js"></script>
</head>
<body><p>text</p></body>
</html>

0x006 多入口文件打包

添加入口

entry  : {
        'index': ['./src/index.js'],
        'index2': ['./src/index2.js']
    }

修改插件命名方式
```
new ExtractTextPlugin("[name].css"),
```

打包并查看dist

$ ls ./dist
index.bundle.js
index.css
index.html
index2.bundle.js
index2.css

更多用法，请查阅webpack关于ExtractTextWebpapckPlugin章节

0x007 资源

源代码