Webpack之“多页面开发”配置

​ 目前在负责公司的一个前端项目，现有的版本是基于Ext.js框架进行搭建，但Ext.js显得过重，而且构建后的代码乱作一团，难以维护和更新。因此目前是在用React+Webpack对项目进行重新构建。前端部分存在着多个页面，因此需要进行Webpack的多页面配置，以下进行简单的记录和分享。

​ Webpack是一个现代前端应用的模块打包器(module bundler)，它可以把如下图所示的具有各种依赖关系的文件打包成一个个的静态资源。

webpack workflow

Webpack.config.js配置

​ entry配置：

entry: {
    login: [
        'webpack-dev-server/client?http://localhost:8080/login',
        __dirname + '/src/scripts/login.js'
    ],
    main: [
        'webpack-dev-server/client?http://localhost:8080/main',
        __dirname + '/src/scripts/main.js'
    ]
}

​ output配置：

output:{
    path: __dirname + '/public',
    filename: 'build/[name].js'     // 构建后的文件，[name]会与entry的key name保持
}

​ plugins配置，需要用到html-webpack-plugin插件，该插件可以通过配置html模板来生成目标html文件，目前该项目有两个页面(main.html和login.html)，每个html文件需要单独配置。配置如下：

plugins: [
    // need to config for each page
    new HtmlWebpackPlugin({
        title: 'MyECS - Log in',
        favicon: __dirname + '/src/styles/images/favicon.ico',
        template: __dirname + '/src/index.html',
        filename: 'login.html',
        chunks: ['login']   // Allows to add only some chunks, ['login'] means login.js
    }),
    new HtmlWebpackPlugin({
        title: 'MyECS',
        favicon: __dirname + '/src/styles/images/favicon.ico',
        template: __dirname + '/src/index.html',
        filename: 'main.html',
        chunks: ['main']
    })
]