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

時間 2019-11-16

標籤開始 webpack 生活 0x015 extracttextwebpackplugin 分離樣式欄目悠閒生活简体版

原文原文鏈接

0x001 概述

上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關係。javascript

0x002 插件介紹

這個插件用來將css導出到單獨文件css

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

此次涉及到loader的使用，能夠暫時忽略這方面配置html

初始化項目java

$ 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，先不使用插件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" }
                ]
            }
        ]
    }
};

添加入口文件和樣式文件git

$ 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比日常打了很多。github

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

// exports

此時若是有html引用該jsweb

$ 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的形式被插到了headnpm

0x004 使用該插件

修改配置vim

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

源代碼

相關標籤/搜索

extracttextwebpackplugin

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。