浮声新志

webpack入门篇：多页面的资源分离引用（js/css按需引用）

发表于 | 分类于 |

新建 index.html:

1
$ vim ./src/tpl/index.html

修改 webpack.config.js 配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
plugins:[
        new HtmlWebpackPlugin({
            filename: __dirname+'/build/html/login-build.html',
            template:__dirname+'/src/tpl/login.html',
            inject:'body',
            hash:true
        }),
        new HtmlWebpackPlugin({
            filename: __dirname+'/build/html/index-build.html',
            template:__dirname+'/src/tpl/index.html',
            inject:'body',
            hash:true
        }),
        // 拆分插件
        new webpack.optimize.CommonsChunkPlugin({
            name:'user', // 上面入口定义的节点组
            filename:'build-user.js' //最后生成的文件名
        }),
        // css抽取
        new extractTextPlugin("[name].css"),
    ]

这样执行webpack命令后，生成的2个目标文件（index-build.html，login-build.html），有什么问题呢？

2个文件都引入了所有的js和css。

下面我们要做到按需引用，不同的html模板引入仅它自己需要的css和js

  1. 为index.html新建一个index.css:

    1
    h1{color: green}

  2. 为index.html新建index.js，并在其中引入index.css:

    1
    2
    alert('这是首页');
    require('./css/index.css');

  3. 编辑webpack.config.js，为不同的html模板指定不同的配置节点

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var webpack = require('webpack');
    var extractTextPlugin = require('extract-text-webpack-plugin');
    module.exports = {
        // entry是入口文件，可以多个，代表要编译那些js
        //entry:['./src/main.js','./src/login.js','./src/reg.js'],
        entry:
        {
            'main':'./src/main.js',
            'user':['./src/login.js','./src/reg.js'],
            'index':['./src/index.js']
        },
        externals:{
            'jquery':'jQuery'
        },
        module:{
            loaders:[
                // {test:/\.css$/,loader:'style-loader!css-loader'},
                {test:/\.css$/,loader:extractTextPlugin.extract('style','css')}
            ],
        },
        output:{
            path: __dirname+'/build/js', // 输出到那个目录下（__dirname当前项目目录）
            filename:'[name].js' //最终打包生产的文件名
        },
        plugins:[
            new HtmlWebpackPlugin({
                filename: __dirname+'/build/html/login-build.html',
                template:__dirname+'/src/tpl/login.html',
                inject:'body',
                hash:true,
                chunks:['main','user']   // 这个模板对应上面那个节点
            }),
            new HtmlWebpackPlugin({
                filename: __dirname+'/build/html/index-build.html',
                template:__dirname+'/src/tpl/index.html',
                inject:'body',
                hash:true,
                chunks:['index']   // 这个模板对应上面那个节点
            }),
            // css抽取
            new extractTextPlugin("[name].css"),
        ]
    };

  4. 执行webpack之后

展示图片

查看index-build.html中只引入了index.css和index.js