web前端高级webpack - webpack的手动配置及多入口多出口打包

约定不等于承诺〃 2022-12-31 13:18 458阅读 0赞

### webpack配置 ###

*  入口（entry）及出口（output）配置

> 前面一篇文章已经介绍了webpack的四个核心概念：入口，出口，loader和插件，下面围绕这四个核心概念，我们来对webpack进行手动配置
> 
>  *  默认情况下我们运行在webpack打包时，webpack会把src下面的index.js作为入口文件；
>  *  打包后会默认生产一个dist目录，里面生成一个main.js文件
>  *  如果我们想手动指定入口文件和输出目录及文件，那么可以手动修改配置文件的方式来实现
>     
>      *  在webpack项目下新建一个webpack.config.js文件，该文件一个配置文件，webpack命令在执行时会自动检查配置文件。
>      *  该文件遵循的是node 的commonJS规范，通过module.exports导出

const path = require('path');
    const { CleanWebpackPlugin} = require('clean-webpack-plugin');
    module.exports = { 
    	entry:"./src/index2.js",//把index2作为入口文件
    	output:{ 
    		filename:'bundle.[hash:8].js',//输出文件，中括号内生成一个8位的hash随机数，避免缓存
    		path: path.resolve(__dirname, "dist") //输出目录 __dirname当前路径， resolve将两个路径合并
    	},
    	plugins:[
    		new CleanWebpackPlugin()//这里还可以设置哪些能删，哪些不能删除
    	]
    }

*  html-webpack-plugin插件 - 自动引入打包文件

>  *  每次打包后都会生成一个全新的出口文件，那么我们就得每次都要去修改html模板文件来重新引入打包好的新的js文件，每次操作都很麻烦，这时我们就可以借助html-webpack-plugin插件来自动帮我们把打包好的js文件引入到html模板中

const path = require('path');
    const { HtmlWebpackPlugin} = require('html-webpack-plugin');
    module.exports = { 
    	entry:"./src/index2.js",//把index2作为入口文件
    	output:{ 
    		filename:'bundle.[hash:8].js',//输出文件，中括号内生成一个8位的hash随机数，避免缓存
    		path: path.resolve(__dirname, "dist") //输出目录 __dirname当前路径， resolve将两个路径合并
    	},
    	plugins:[
    		new HtmlWebpackPlugin()//自动将打包好的js文件导入的html模板文件中
    	]
    }

*  clean-webpack-plugin插件 - 自动清除打包文件

>  *  每次运行webpack打包时默认会生成dist目录，但是每次打包时里面的内容不会被清空，上一次打包的文件还会保留着，这样就会导致打包次数越多生成的文件越多，这时需要借助一个插件（clean-webpack-plugin）来清除老的文件

*  webpack-dev-server - 创建本地服务器，自动重新构建并自动打开浏览器

>  *  安装： npm install webpack-dev-server -D
>  *  webpack-dev-server插件可以自动的创建一个本地服务，为我们的代码提供一个运行环境，类似IIS/apache等
>  *  还可以通过该插件实现自动构建和自动打开浏览器
>  *  要想使用该插件，除了需要在webpack.config.js配置文件配置以外，还需要在package.json文件中配置启动命令。
>  *  然后通过npm run \[devserver\]就可以直接启动了

//webpack.config.js
    module.exports = { 
    	devServer:{ //在内存中打包，所有的内容是在根目录下的
    		port: 8080,//设置端口号
    		open: true, //自动打开浏览器
    		compress: true, //代码压缩
    		contentBase:"static",//静态资源文件
    		hot: true,//自动刷新
    	}
    }
    
    //package.js
    { 
    	scripts:{ 
    		"devserver":"webpack-dev-server"
    	}
    }

*  多入口多出口多html页面文件配置

>  *  有时候项目比较大比较复杂时，入口文件可能就不只一个了，比如一个项目中有index.js和other.js 两个文件都需要作为入口文件，这时就需要我们通过webpack.config.js配置文件进行配置来支持多入口
>  *  只需将entry改成对象键值对的方式配置即可

const path = require('path');
    const { HtmlWebpackPlugin} = require('html-webpack-plugin');
    module.exports = { 
    	entry:{ 
    		index:"./src/index.js",
    		other:"./src/other.js"
    	}
    	output:{ 
    		filename:'[name].js',//输出文件，中括号中的name代表的就是上面entry中的index或other
    		path: path.resolve(__dirname, "dist") //输出目录 __dirname当前路径， resolve将两个路径合并
    	},
    	plugins:[
    		new HtmlWebpackPlugin({ 
    			template:"./index.html",//依赖的模板文件
    			hash:true,
    			minify:{ 
    				removeAttributeQuotes: true,//删除引号
    				collapseWhitespace: true,//删除空格
    			},
    			filename:'index.html',//打包后的HTML文件名
    			chunks:['index']//将打包后的index.js引入到index.html中
    		}),//自动将打包好的js文件导入的html模板文件中
    		new HtmlWebpackPlugin({ 
    			template:"./other.html",//依赖的模板文件
    			hash:true,
    			minify:{ 
    				removeAttributeQuotes: true,//删除引号
    				collapseWhitespace: true,//删除空格
    			},
    			filename:'other.html',//打包后的HTML文件名
    			chunks:['other']//将打包后的other.js引入到other.html中
    		}),//自动将打包好的js文件导入的html模板文件中
    	]
    }

> 上面的代码中如果有很多个html页面，那么就需要配置多个HtmlWebpackPlugin，这样就很麻烦了，那么我们可以封装一个方法，后面如果有很多HTML页面的话我们之间调用封装好的方法就可以了。

let htmlPlugins = ['index','other'].map(chunkName=>{ 
    	return new HtmlWebpackPlugin({ 
    		template: `./src/${ chunkName}.html`,
    		filename:`${ chunkName}.html`,
    		chunks:[chunkName]
    	});
    });
    plugins:[
    		...htmlPlugins
    	]

*  本节内容中完整配置如下：