详解webpack 多页面/入口支持&公共组件单独打包

详解webpack 多页面/入口支持&公共组件单独打包 在本文中，我们将详细介绍webpack 多页面/入口支持和公共组件单独打包的知识点。这些知识点对于前端开发者来说非常重要，可以帮助他们更好地理解webpack的工作原理和应用场景。 一、webpack 多页面/入口支持 webpack 默认支持多入口，官方也有多入口的示例。我们可以在webpack.config.js文件中配置多个入口文件，如下所示： ``` module.exports = { entry: { pageA: "./pageA", pageB: "./pageB" }, output: { path: path.join(__dirname, "js"), filename: "[name].bundle.js", chunkFilename: "[id].chunk.js" } } ``` 但是，每新增一个页面就需要在webpack.config.js的entry 中增加一个新的入口，这样会使得配置文件变得复杂和难以维护。那么如何支持不修改配置文件呢？ 我们可以使用glob模块来自动扫描入口文件。glob模块可以用于文件名匹配，通过它，我们可以很容易地遍历出src/js目录下的所有js文件。下面是使用glob模块的示例： ``` var glob = require('glob') // entries函数 var entries = function () { var jsDir = path.resolve(srcDir, 'js') var entryFiles = glob.sync(jsDir + '/*.{js,jsx}') var map = {} for (var i = 0; i < entryFiles.length; i++) { var filePath = entryFiles[i] var filename = filePath.replace(jsDir + '/', '') map[filename] = filePath } return map } ``` 二、公共组件单独打包 在前端开发中，公共组件的单独打包非常重要。webpack提供了多种方式来实现公共组件的单独打包，例如使用CommonsChunkPlugin插件。 在webpack.config.js文件中，我们可以使用CommonsChunkPlugin插件来实现公共组件的单独打包，如下所示： ``` module.exports = { // ... plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2 }) ] } ``` 这将生成一个名为common.js的公共组件文件，该文件包含了所有入口文件共有的依赖项。 三、自动构建入口函数 自动构建入口函数可以帮助我们自动扫描入口文件，并生成对应的output。我们可以使用glob模块来实现自动构建入口函数，如下所示： ``` var entries = function () { var jsDir = path.resolve(srcDir, 'js') var entryFiles = glob.sync(jsDir + '/*.{js,jsx}') var map = {} for (var i = 0; i < entryFiles.length; i++) { var filePath = entryFiles[i] var filename = filePath.replace(jsDir + '/', '') map[filename] = filePath } return map } ``` 四、结论 在本文中，我们详细介绍了webpack 多页面/入口支持和公共组件单独打包的知识点。这些知识点对于前端开发者来说非常重要，可以帮助他们更好地理解webpack的工作原理和应用场景。同时，我们也提供了使用glob模块来实现自动构建入口函数的示例代码。