成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

從零開始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

Jonathan Shieber / 3374人閱讀

摘要：概述上一章講的是，這一章講的是依舊是沒有任何關(guān)系。配合插件自動(dòng)插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請(qǐng)查閱關(guān)于章節(jié)資源源代碼

0x001 概述

上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關(guān)系。

0x002 插件介紹

這個(gè)插件用來將css導(dǎo)出到多帶帶文件

0x003 栗子-不使用該插件的情況

這次涉及到loader的使用，可以暫時(shí)忽略這方面配置

初始化項(xiàng)目

$ 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;
}

打包并查看打包結(jié)果index.bundle.js，可以發(fā)現(xiàn)，css被打包到了js里面，以字符串的形式存在，并且整個(gè)index.bundle.js比平常打了不少。

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

// exports

此時(shí)如果有html引用該js

$ vim ./src/index.html




    
    Title
    



text

5 瀏覽器打開index.html，就會(huì)發(fā)現(xiàn)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，可以發(fā)現(xiàn)，index.bundle.js文件恢復(fù)了正常，并且多出來一個(gè)style.css文件。

$ webpack
// ./dist/style.css
p{
    color: red;
}p{
    font-size: 30px;
}

0x005 配合HtmlWebpackPlugin插件自動(dòng)插入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

更多用法，請(qǐng)查閱webpack關(guān)于ExtractTextWebpapckPlugin章節(jié)

0x007 資源

源代碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89582.html

相關(guān)文章

  • 從零開始的webpack生活-0x001：webpack初次相逢

    摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯(cuò)誤，比如語法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。 0x001 概述 其實(shí)我不知道怎么寫，所以決定就一塊一塊的寫點(diǎn)平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

    Turbo 評(píng)論0 收藏0

  • 從零開始的webpack生活-0x009：FilesLoader裝載文件

    摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結(jié)尾的文件，都將使用這個(gè)來處理命中后使用的加載器查看結(jié)果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護(hù)和美觀更多配置，可以查閱關(guān)于部分。 0x001 概述 上一章講的是DLL加速編譯，這一章開始講loader相關(guān)的部分，但是關(guān)于plugin的部分善未完結(jié)，因?yàn)榧磳⒁v的ExtractTextWebp...

    NervosNetwork 評(píng)論0 收藏0

  • 從零開始的webpack生活-0x016：OtherPlugin其他常用

    摘要：概述上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件和上一章是沒有任何關(guān)系。環(huán)境搭建定義環(huán)境插件介紹這個(gè)插件用來定義環(huán)境變量的，直接定義在了下。安裝依賴添加資源修改配置打包其他更多配置請(qǐng)查閱關(guān)于資源源代碼 0x001 概述 上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件,和上一章是沒有任何關(guān)系。 0x002 環(huán)境搭建 $ mkdir 0x0016-other-plug...

    chinafgj 評(píng)論0 收藏0

  • 從零開始的webpack生活-0x011：StylingLoader裝載樣式

    0x001 概述 上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環(huán)境 $ 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 評(píng)論0 收藏0

  • 從零開始的webpack生活-0x007：CommonsChunkPlugin基本用法

    摘要：概述上一章講的是，和這一章依舊沒有絲毫關(guān)系，這一章講的是說實(shí)在的，這個(gè)插件略復(fù)雜，我還沒完全搞懂，大概是還沒到那么深我就已經(jīng)選擇其他解決方案了吧，所以這里只講一些基本用法。直接打包幾個(gè)包當(dāng)然還有許多更加復(fù)雜的用法，還請(qǐng)看關(guān)于章節(jié)資源源代碼 0x001 概述 上一章講的是providerPlugin，和這一章依舊沒有絲毫關(guān)系，這一章講的是CommonsChunkPlugin,說實(shí)在的，這...

    Sleepy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<