webpack4 从0开始搭建前端模块化脚手架

￡神魔★判官ぃ 2023-07-10 08:16 5阅读 0赞

## webpack 搭建前端模块化脚手架 ##

## webpack简介 [官网地址][Link 1] ##

引用官网的一段描述：webpack是一个现代的javascript应用程序的静态模块打包器，在webpack处理应用程序时他会递归的创建一个依赖关系图，其中包含应用程序的需要的每个模块，然后将这些模块打包成一个或多个bundle。webpack默认的配置文件是**webpack.config.js**。  
在webpack中最核心的有四个概念：

1.  **入口(entry)** ，入口会指定webpack应该使用那个模块作为构建内部依赖图的开始；  
    入口配置：

const config = {
    		  entry: {
    		    index :  ['./page/index.js'],
    		    vendors: ['./page/vendors.js']
    		  }
    		};
    		// 这里配置了两个入口 分别是index和vendors

1.  **出口(output)** ，output属性配置了webpack将它创建的bundles输出到哪里和文件如何命名，默认值为./dist；注意：*即使可以存在多个入口起点，但只能指定一个输出配置*。  
    出口配置（结合上边配置的出口）：

const path = require('path');
    		const config = {
    		  entry: {
    		     index :  ['./page/index.js'],
    		    vendors:  ['./page/vendors.js']
    		  },
    		  output: {
    		    path: path.resolve(__dirname,'./dist'),
    		    filename: '[name].js'
    		  }
    		}
    		//这里是多入口文件的输出配置，[name]通配符可以取到入口定义的名称
    		//上述代码打包后会输出两个js文件，分别是/dist/index.js和/dist/vendors.js他们都被打包到/dist文件夹中

1.  **loader** ，webpack是将各个模块通过模块之间的依赖关系进行打包的。webpack自生只会处理javaScript文件，一些非JavaScript文件webpack自身处理不了。loader让webpack能够处理哪些非JavaScript文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块进而可以使用webpack的打包能力进行打包。  
    loader配置：

module: {
    		    rules: [{ 	
    		    	test: /\.css$/, 	//标识被对应的loader进行转换的某个或某些文件。
    		      	use: 'css-loader'  //进行转换时，应该使用那个loader
    		     }]
    		  }
    		  /*
    		  	上边配置项表示，当我们遇到[require()/import]语句中引用.css结尾的文件时，
    		  	在进行webpack打包前先使用css-loader转换一下。
    		  */

1.  **插件(plugins)** ，插件的功能要比loader更加强大个广泛，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量；  
    插件配置：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //需要通过npm安装
    		plugins: [
    		    new HtmlWebpackPlugin({template: './page/index.html'})
    		  ]
    		//上边配置使用插件HtmlWebpackPlugin来打包HTML模板。

## 开始脚手架搭建 ##

搭建脚手架我们需要以下步骤进行：
    1. 利用npm init命令初始化项目，建立基本项目文件夹结构
    2. 安装webpack，全局安装和项目中安装
    3. 进行webpack多入口和出口配置
    4. 进行公共模块配置，打包公共模块
    5. css文件处理，独立打包css文件
    6. html文件处理，打包html模板
    7. 打包静态资源，如：图片、字体等
    8. webpack-dev-server安装

1.  **利用npm init命令初始化项目**  
    *使用npm命令前需要安装node.js。*  
    在本地磁盘上新建项目文件夹demo，cmd到demo然后执行npm init初始化项目（初始化项目时好多配置选项这里不进行赘述）。  
    初始化项目后生成一个package.json的配置文件，我们建立我们的目录结构：

--demo
    			--src
    				--image
    				--page
    				--view
    			package.json

1.  **安装webpack**  
    进行全局安装webpack: npm install webpack -g  
    在项目目录下安装webpack：npm install --save-dev webpack  
    安装成功后可以看到package.json中已经存在webpack了：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng_size_16_color_FFFFFF_t_70]
2.  **进行webpack多入口和出口配置**  
    在package.json文件同级目录下创建webpack.config.js（webpack配置文件）  
    webpack.config.js配置如下:

const path = require('path');
    
    	var config = {
    	    // 定义入口配置
    	    entry : {
    	        'index' : ['./src/page/index/index.js'],  //./src/page/index/index.js 作为入口文件
    	        'one'   : ['./src/page/one/index.js']
    	    },
    	    //定义文件输出配置
    	    output : {
    	        path     : path.resolve(__dirname,'./dist'), //输出文件输出到当前目录下的dist文件夹下
    	        filename : './js/[name].js'  //文件生成的命名是以入口定义的名称+.js进行的，并且放置到dist/js文件夹下
    	    }
    	}
    
    	module.exports = config;

进行配置验证：  
在demo/page文件夹下创建index和one文件夹，并且分别创建出index,js文件  
demo/page/inex/index.js

console.log('我是index');

demo/page/one/index.js

console.log('我是one');

在demo文件夹下执行命令：webpack  
命令执行成功后查看dist文件夹下是否存在/js/index.js和/js/one.js文件  
![在这里插入图片描述][20200301111933102.JPG]  
4. **进行公共模块配置，打包公共模块**  
webpack4 中进行公共模块打包的是SplitChunksPlugin。

***SplitChunksPlugin简介***（[引自简书前端小酱的博文][Link 2]）：  
最开始chunks(代码块)和他们中的模块通过webpack内部的父子关系图连接，SplitChunksPlugin的作用是避免他们之间的依赖重复。

我们在安装webpack4成功后该插件就可以使用了,该插件位置在demo\\node\_modules\\webpack\\lib\\optimize\\SplitChunksPlugin.js。也就是说我们在不配置的情况下也是可以使用SplitChunksPlugin的。

SplitChunksPlugin在webpack默认配置如下：

module.exports = {
    	  //...
    	  optimization: {
    	    splitChunks: {
    	      chunks: 'async',		//作用与异步加载块
    	      minSize: 30000,	//生成块的最小值
    	      minRemainingSize: 0,	
    	      maxSize: 0,
    	      minChunks: 1,
    	      maxAsyncRequests: 6,	//按需加载最大并行请求数
    	      maxInitialRequests: 4, //初始化页面加载时并行请求的最大数
    	      automaticNameDelimiter: '~',	//文件名的连接符
    	      automaticNameMaxLength: 30,
    	      cacheGroups: {	//缓存组
    	        defaultVendors: { 
    	          test: /[\\/]node_modules[\\/]/,
    	          priority: -10
    	        },
    	        default: {
    	          minChunks: 2,
    	          priority: -20,
    	          reuseExistingChunk: true
    	        }
    	      }
    	    }
    	  }
    	};

默认配置说明：

*  会被共享的代码块或者node\_mudules文件夹中的代码块
 *  体积大于30KB的代码块（在min+gz前）
 *  按需加载代码块时的并行请求的最大数量将小于或等于6
 *  初始化页面加载时并行请求的最大数量将小于或等于4

缓存组说明：  
在默认配置中会将node\_mudules文件夹中的模块打包到一个叫defaultVendors的bundle中，所有引用超过两次的模块被分配到default中。

**chunks:** 属性用来选择分割哪些代码块：

*  async: 按需加载的代码块，也就是动态加载代码块。
 *  initial：初始化代码块。
 *  all：表示所有的代码块，包含同步和异步加载的代码块。

**minChunks：** 拆分前必须共享模块的最小块数。  
**minSize:** 生成块的最小大小（以字节为单位）。  
**maxAsyncRequests：** 按需加载时并行请求的最大数量。  
**maxInitialRequests：** 入口点的最大并行请求数。  
**test：** 控制此缓存组选择的模块。  
**priority：** 优先级。

我们在不进行任何配置下测试SplitChunksPlugin：  
根据默认的配置文件我们知道我们要在webpack中按需加载一个体积大于30KB的代码块并且加载的数量要小于6。

我们在/demo/page/下新建一个文件夹two和test1.js、test2.js文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng_size_16_color_FFFFFF_t_70 1]  
在/demo/page/two/下新建index.js文件，并且对外暴露一个sayHello方法。

module.exports = {
        sayHello:() => { console.log('我是 two/index.js'); }
    }
    //.....写点没用的东西让其大于30kb

然后我们要在test1.js和test2.js中都动态引入two/index.js文件。  
*test1.js：*

import('./two/index.js').then(module => {
        module.default.sayHello();
    });
    console.log('我是test1');

*test2.js：*

import('./two/index.js').then(module => {
        module.default.sayHello();
    });
    console.log('我是test2');

最后我们在one/index.js中引入test1.js和test2.js  
*/page/one/index.js:*

console.log('我是one');
    require('../test1.js');
    require('../test2.js');

截至到现在我们实现了：

*  一个大于30kb的模块（/page/two/index.js），他是被动态引入的。
 *  该模块得别被/page/test1.js和/page/test2.js引用了2次。
 *  我们在/page/one/inddex.js中调用了test1.js和test2.js

最后我们执行webpack进行打包，观察dist文件夹中文件即可。  
![在这里插入图片描述][20200301220530769.JPG]  
打包成功后发现在dist中多了一个0.js文件，表示webpack默认的公共代码抽取测试成功（至于文件名为什么是0.js和一些关于SplitChunksPlugin详细配置请参考：[码农网][Link 3] [官网][Link 4]）。

整明白了SplitChunksPlugin的基本信息后，配置我们的SplitChunksPlugin：  
首先我们创建我们的common.js用作公共代码JS，在/demo/page/common/下建立index.js。  
然后在entry中添加一个入口：

'common':['./src/page/common/common.js']

在config中添加SplitChunksPlugin配置：

optimization : {
    	        splitChunks : {
    	            cacheGroups : { //缓存组
    	                common : {
    	                    name : 'common', 
    	                    test : /[\\/]src[\\/]/,  //所有src文件夹下
    	                    minSize : 0, //文件大小是0   这里只是为了好测试实际按照情况而定
    	                    chunks : 'all', //全部代码块 
    	                    minChunks: 2, //最小引用次数
    	                    priority : 5 //优先级
    	                }
    	            }
    	        }
    	    },

***现阶段完整的配置：***

const path = require('path');
    
    var config = {
        // 定义入口配置
        entry : {
            'index' : ['./src/page/index/index.js'],  //./src/page/index/index.js 作为入口文件
            'one'   : ['./src/page/one/index.js'],
            'common': ['./src/page/common/common.js']
        },
        //定义文件输出配置
        output : {
            path     : path.resolve(__dirname,'./dist'), //输出文件输出到当前目录下的dist文件夹下
            filename : './js/[name].js'  //文件生成的命名是以入口定义的名称+.js进行的，并且放置到dist/js文件夹下
        },
        optimization : {
            splitChunks : {
                cacheGroups : {
                    common : {
                       name : 'common', 
                       test : /[\\/]src[\\/]/,  //所有src文件夹下
                       minSize : 0, //文件大小是0   这里只是为了好测试实际按照情况而定
                       chunks : 'all', //全部代码块 
                       minChunks: 2, //最小引用次数
                       priority : 5 //优先级
    	            }
                }
            }
        }
    }
    
    module.exports = config;

1.  **css文件处理，独立打包css文件**  
    前边提到webpack处理除JavaScript文件时的方法是使用loader或者plugins。  
    这里我们使用css-loader和style-loader来处理css文件的打包。  
    首先安装css-loader和style-loader

npm install --save-dev css-loader style-loader

安装成功后在package.json文件中新增：  
![在这里插入图片描述][20200302205734889.JPG]  
说明我们css-loader，style-loader安装成功了。  
进行webpack配置在webpack.config.js文件中添加：

module: {
            rules : [
                {
                    test : /\.css$/,
                    use  : ['style-loader','css-loader']   //加载顺序是从右向左
                }
            ]
        },

然后在/demo/page/index/文件夹下创建index.css文件。  
*/demo/page/index/index.css*

body{
    	    background: #f00;
    	}

在/demo/page/index/index.js引用index.css  
*/demo/page/index/index.js*

require('./index.css');
    console.log('我是index');

执行webpack打包命令，在打包后的dist/js文件夹中找到打包的index.js，从中可以找到\*\*background: \#f00;\*\*说明我们打包成功。  
默认的.css文件会被打包在js文件中，如果想要独立出.css文件则需要使用extract-text-webpack-plugin。

首先安装extract-text-webpack-plugin(当前版本不支持webpack4所以使用最新的beta版)：

npm install --save-dev extract-text-webpack-plugin@next

安装成功后修改我们的webpack配置文件：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); //导入插件
    
    //....
    module: {
            rules : [
                {
                    test : /\.css$/,  //匹配.css文件
                    use : ExtractTextPlugin.extract({
                        fallback : 'style-loader',
                        use : 'css-loader'
                    })
                }
            ]
        },
        plugins : [
            new ExtractTextPlugin('./css/[name].css')  //.css文件打包后生成在dist/css/文件夹下
        ]

我们在执行webpack打包命令：  
![在这里插入图片描述][20200302220651627.JPG]  
.css文件被成功打包到/dist/css/文件夹下。  
***现阶段完整的配置：***

1.  **html文件处理，打包html模板**  
    我们使用HtmlWebpackPlugin来打包HTML文件。  
    我们直接进行配置就好，关于这个插件的简介可以参考博文[html-webpack-plugin详解][html-webpack-plugin]写的含详细很好。  
    首先使用npm安装HtmlWebpackPlugin：

npm install --save-dev html-webpack-plugin

之后在webpack.config.js中进行配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
    	
    	//.....
        plugins : [
            new ExtractTextPlugin('./css/[name].css'),
            new HtmlWebpackPlugin({
                template : './src/view/index.html',  //本地模板文件位置
                filename : './html/index.html',  //输出模板文件位置
                title : '111',     //标题 只有在页面中主动引用才会生效
                inject : true,  //true或者body 表示静态文件javascript插入到模板的位置是在body的最下方
                hash : true,    //给每一个静态资源添加有一个hash值
                chunks : ['common','index'] //打包的静态资源，在入口配置entry中对应相应的.js
            })
        ]

在/demo/src/view/文件夹下创建index.html文件：  
/demo/src/view/index.html

<!DOCTYPE html>
    	<html>
    		<head>
    		    <title>首页</title>
    		</head>
    		<body>
    		    <p>这是首页</p>
    		</body>
    </html>

执行webpack打包命令后，在dist/html/文件夹下会看到index.html文件，打开后会发现common.js和index.js被成功添加在body的最下方。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng_size_16_color_FFFFFF_t_70 2]  
我这里的所有连接都是从/D:/node/workspace/demo/dist/开头的，这是我在output配置的前缀。

output: {
            path : path.resolve(__dirname,'./dist'),
            // 添加前缀，防止静态资源打包后找不到路径，比如：图片
            publicPath: '/D:/node/workspace/demo/dist',  
            filename:'./page/[name].js'
        },

1.  **打包静态资源，如：图片、字体等**  
    打包静态资源我们使用url-loader。  
    同样我们需要先安装后在使用:

npm install --save-dev url-loader

之后在webpack.config.js中进行配置：

//...
    	module:{
    	        rules : [
    	            {
    	                test : /\.css$/,
    	                use : ExtractTextPlugin.extract({
    	                    fallback : 'style-loader',
    	                    use : 'css-loader'
    	                })
    	            },
    	            {
    	                test : /\.(gif|png|jpg|woff2|woff|svg|eot|ttf)\??$/,
    	                use : [{
    	                    loader : 'url-loader',
    	                    options : {
    	                        esModule : false,
    	                        limit : 100,
    	                        name : '/resource/[name].[ext]'
    	                    }
    	                }]
    	            }
    	        ]
    	    },

我们在/demo/src/view/index.html中引用一张图片：

<!DOCTYPE html>
    <html>
    	<head>
    	    <title>首页</title>
    	</head>
    	<body>
    	
    	    <p>这是首页</p>
    	    <div>
    	        <img src="<%= require('Image/vue.png')%>">
    	    </div>
    	</body>
    </html>

然后执行webpack打包命令，查看index.html：

<!DOCTYPE html>
    <html>
    	<head>
    	    <title>首页</title>
    	<link href="/D:/node/workspace/demo/dist/./css/index.css?72db5bded6fa49c907a8" rel="stylesheet"></head>
    	<body>
    	    <p>这是首页</p>
    	    <div>
    	        <img src="/D:/node/workspace/demo/dist/resource/vue.png">
    	    </div>
    	<script type="text/javascript" src="/D:/node/workspace/demo/dist/./page/index.js?72db5bded6fa49c907a8"></script>		  <script type="text/javascript" src="/D:/node/workspace/demo/dist/./page/common.js?72db5bded6fa49c907a8"></script>
    	</body>
    </html>

这里我们可以使用别名来指定我们常用的一个目录，向上边我们导入图片是就是使用的别名指定的路径，别名配置如下：

resolve : {
            alias:{
                Image : path.resolve(__dirname,'src/image'),  
                Page  : path.resolve(__dirname,'src/page')
            }
        },

***现阶段完整的配置：***

1.  **webpack-dev-server安装**  
    –未完待续

如果您在上述文章中发现有错误的地方欢迎您指出来我会积极去改正。

[Link 1]: https://www.webpackjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301105521302.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng==,size_16,color_FFFFFF,t_70
[20200301111933102.JPG]: https://img-blog.csdnimg.cn/20200301111933102.JPG
[Link 2]: https://www.jianshu.com/p/2cc8457f1a10
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200301215320539.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng==,size_16,color_FFFFFF,t_70
[20200301220530769.JPG]: https://img-blog.csdnimg.cn/20200301220530769.JPG
[Link 3]: https://www.codercto.com/a/24308.html
[Link 4]: https://webpack.js.org/plugins/split-chunks-plugin/
[20200302205734889.JPG]: https://img-blog.csdnimg.cn/20200302205734889.JPG
[20200302220651627.JPG]: https://img-blog.csdnimg.cn/20200302220651627.JPG
[html-webpack-plugin]: https://www.cnblogs.com/wonyun/p/6030090.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200303201656363.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlNjY2Ng==,size_16,color_FFFFFF,t_70