使用 vue-cli 開發多頁應用

修改的webpack配置文件

全局配置

修改 webpack.base.conf.js

打開 ~\build\webpack.base.conf.js ，找到entry，添加多入口

entry: {
    app: './src/main.js',
    app2: './src/main2.js',
    app3: './src/main3.js',
},

運行、編譯的時候每個入口都會對應一個Chunk

run dev 開發環境

修改 webpack.dev.conf.js

打開 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其後面添加對應的多頁，併爲每一個頁面添加Chunk配置

chunks: ['app']中的app對應的是webpack.base.conf.js中entry設置的入口文件

plugins:[
    // https://github.com/ampedandwired/html-webpack-plugin
    // 多頁:index.html → app.js
    new HtmlWebpackPlugin({
      filename: 'index.html',//生成的html
      template: 'index.html',//來源html
      inject: true,//是否開啓注入
      chunks: ['app']//須要引入的Chunk，不配置就會引入全部頁面的資源
    }),
    // 多頁:index2.html → app2.js
    new HtmlWebpackPlugin({
      filename: 'index2.html',//生成的html
      template: 'index2.html',//來源html
      inject: true,//是否開啓注入
      chunks: ['app2']//須要引入的Chunk，不配置就會引入全部頁面的資源
    }),
    // 多頁:index3.html → app3.js
    new HtmlWebpackPlugin({
      filename: 'index3.html',//生成的html
      template: 'index3.html',//來源html
      inject: true,//是否開啓注入
      chunks: ['app3']//須要引入的Chunk，不配置就會引入全部頁面的資源
    })
]

run build 編譯

修改 config/index.js

打開~\config\index.js，找到build下的index: path.resolve(__dirname, '../dist/index.html')，在其後添加多頁

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    index2: path.resolve(__dirname, '../dist/index2.html'),
    index3: path.resolve(__dirname, '../dist/index3.html'),
},

修改 webpack.prod.conf.js

打開~\build\webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其後面添加對應的多頁，併爲每一個頁面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中對應的 build

plugins: [
    // 多頁:index.html → app.js
    new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            // more options:
            // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        chunksSortMode: 'dependency',
        chunks: ['manifest','vendor','app']//須要引入的Chunk，不配置就會引入全部頁面的資源
    }),
    // 多頁:index2.html → app2.js
    new HtmlWebpackPlugin({
        filename: config.build.index2,
        template: 'index2.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest','vendor','app2']//須要引入的Chunk，不配置就會引入全部頁面的資源
    }),
    // 多頁:index3.html → app3.js
    new HtmlWebpackPlugin({
        filename: config.build.index3,
        template: 'index3.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest','vendor','app3']//須要引入的Chunk，不配置就會引入全部頁面的資源
    }),
]

參考:
小凡哥視頻 - 講解 vuejs2 ，使用 vue-cli 怎麼搭起 多頁應用

---

若是頁面比較多，能夠考慮使用循環將 HtmlWebpackPlugin 添加到 plugins

// utils.js
exports.getEntry = function(globPath, pathDir) {
    var files = glob.sync(globPath);
    var entries = {},
        entry, dirname, basename, pathname, extname;

    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);
        extname = path.extname(entry);
        basename = path.basename(entry, extname);
        pathname = path.join(dirname, basename);
        pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
        entries[pathname] = ['./' + entry];
    }
    return entries;
}

// webpack.base.conf.js
var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));
pages.forEach(function (pathname) {
    // https://github.com/ampedandwired/html-webpack-plugin
    var conf = {
        filename: '../views/' + pathname + '.html', //生成的html存放路徑，相對於path
        template: '../src/views/' + pathname + '.html', //html模板路徑
        inject: false,    //js插入的位置，true/'head'/'body'/false
        /*
         * 壓縮這塊，調用了html-minify，會致使壓縮時候的不少html語法檢查問題，
         * 如在html標籤屬性上使用{{...}}表達式，因此不少狀況下並不須要在此配置壓縮項，
         * 另外，UglifyJsPlugin會在壓縮代碼的時候連同html一塊兒壓縮。
         * 爲避免壓縮html，須要在html-loader上配置'html?-minimize'，見loaders中html-loader的配置。
         */
        // minify: { //壓縮HTML文件
        //     removeComments: true, //移除HTML中的註釋
        //     collapseWhitespace: false //刪除空白符與換行符
        // }
    };
    if (pathname in config.entry) {
        conf.favicon = 'src/images/favicon.ico';
        conf.inject = 'body';
        conf.chunks = ['vendors', pathname];
        conf.hash = true;
    }
    config.plugins.push(new HtmlWebpackPlugin(conf));
});

一樣入口 entry 也能夠使用

// webpack.base.conf.js
entry: {
    app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
},