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

Jonathan Shieber 发布于2019-08-21 17:29 / 3279人阅读

摘要：概述上一章讲的是，这一章讲的是依旧是没有任何关系。配合插件自动插入修改配置打包并查看它以的形式被插入头部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，请查阅关于章节资源源代码

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{
    color: red;
}", ""]);

// exports

此时如果有html引用该js

$ vim ./src/index.html Title

text

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的形式被插入头部

text

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 资源

源代码

私有云超融合服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

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

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

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x009：FilesLoader装载文件

摘要：修改配置文件匹配的文件名，这里匹配后缀为的，只要了该文件名结尾的文件，都将使用这个来处理命中后使用的加载器查看结果，和之前一致，推荐使用配置文件形式，可以保持引入文件格式的一致性。有利于维护和美观更多配置，可以查阅关于部分。 0x001 概述上一章讲的是DLL加速编译，这一章开始讲loader相关的部分，但是关于plugin的部分善未完结，因为即将要讲的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x016：OtherPlugin其他常用

摘要：概述上一章讲的是分离样式，这一章讲的是剩下的一些我常用的插件和上一章是没有任何关系。环境搭建定义环境插件介绍这个插件用来定义环境变量的，直接定义在了下。安装依赖添加资源修改配置打包其他更多配置请查阅关于资源源代码 0x001 概述上一章讲的是分离样式，这一章讲的是剩下的一些我常用的插件,和上一章是没有任何关系。 0x002 环境搭建 $ mkdir 0x0016-other-plug...

chinafgj 2019-08-21 17:36 评论0 收藏0
从零开始的webpack生活-0x011：StylingLoader装载样式

0x001 概述上一章讲的是装载模板，这一章讲的是装载样式 0x002 配置环境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x007：CommonsChunkPlugin基本用法

摘要：概述上一章讲的是，和这一章依旧没有丝毫关系，这一章讲的是说实在的，这个插件略复杂，我还没完全搞懂，大概是还没到那么深我就已经选择其他解决方案了吧，所以这里只讲一些基本用法。直接打包几个包当然还有许多更加复杂的用法，还请看关于章节资源源代码 0x001 概述上一章讲的是providerPlugin，和这一章依旧没有丝毫关系，这一章讲的是CommonsChunkPlugin,说实在的，这...

Sleepy 2019-08-21 17:28 评论0 收藏0