webpack学习（十六）：glob配置动态入口

太过爱你忘了你带给我的痛 2022-04-05 10:27 436阅读 0赞

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]  
继上一次分离生产模式和开发模式的配置: [https://blog.csdn.net/qq593249106/article/details/84948648][https_blog.csdn.net_qq593249106_article_details_84948648]

修改NPM脚本路径:

"scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --progress --config ./config/webpack.prod.js",
        "dev": "webpack-dev-server --open --hot --progress --config ./config/webpack.dev.js"
      },

修改 webpack.common.js, webpack.dev.js, webpack.prod.js 相关路径:  
**webpack.common.js**

output: {  //公共output
            path: path.join(__dirname, '../dist'),
            filename: 'js/[name].js', //根据入口文件分为不同出口文件
        },

rules: [ //公共配置加载器
            { 
                test: /\.js$/,
                // exclude: /node_modules|packages/, exclude代表不需要进行 loader 的目录
                include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
                use: 'babel-loader'
            }
        ]

new CleanWebpackPlugin(['../dist']),

**webpack.prod.js**

rules: [
    	            { 
    	                test: /\.(sa|sc|c)ss$/,
    	                include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
    	                use: [
    	                    MiniCssExtractPlugin.loader, //生产模式使用分离代码插件
    	                    'css-loader',
    	                    'sass-loader',
    	                ]
    	            }
    	        ]

**webpack.dev.js**

rules: [
    	            { 
    	                test: /\.(sa|sc|c)ss$/,
    	                include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
    	                use: [
    	                    'style-loader', //开发模式不使用插件
    	                    'css-loader',
    	                    'sass-loader',
    	                ]
    	            }
    	        ]

devServer: {  //开发模式启用服务器
            contentBase: '../dist',
            port: 8080,
            compress: true
        }

## 使用 glob ##

glob 在webpack中对文件的路径处理非常之方便, 它可以扫描目录获取符合的文件名, 借助 glob 扫描页面文件就可以做到自动配置入口文件

## 安装 ##

npm install glob -save-dev

## 配置动态入口及动态 html-webpack-plugin ##

**webpack.common.js**

新建一个页面测试:  
![在这里插入图片描述][20181211235757380.png]

## 打包 ##

终端输入 npm run build, dist 目录下多了相应的文件:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
打开 test.html:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]

## 运行服务器 ##

终端输入 npm run dev, 弹出网页, 测试热替换功能, 均正常, 成功配置动态入口文件:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 2]

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84948648]: https://blog.csdn.net/qq593249106/article/details/84948648
[20181211235757380.png]: /images/20220405/ac6f7d1f84484599b8ac70248bfb9626.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220405/13ffb31b52ee413db3546c48229598b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]: /images/20220405/dc572d7f07ef4ba29d9684e320d1ab54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 2]: /images/20220405/1faa87ea8b05460f91a4b9de235c8726.png