webpack4的安装配置及其使用

最新推荐文章于 2023-02-13 20:14:28 发布

凌风子夜

最新推荐文章于 2023-02-13 20:14:28 发布

阅读量214

点赞数

分类专栏：杂记文章标签： webpack

本文链接：https://blog.csdn.net/qq_41741576/article/details/100976918

版权

杂记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

承接上文，上部分关于npm的链接

webpack4的安装配置

以管理员身份在命令行窗口输入 npm install webpack -g，系统就会自动下载该安装包，-g代表全局安装。
为了使用webpack命令，我们还需要安装webpack-cli，输入npm i -g webpack-cli，系统自动安装完成webpack-cli。
在命令行中输入webpack-version，就可以看到安装的webpack版本号，表示成功。如果没有看到版本号，报命令错误，需要在系统变量的Path中添加 E:\nodejs\node_global，即全局安装包的父路径。

webpack的项目打包

全局安装了webpack过后，可以直接使用该功能。
必须在项目根目录新建一个webpack.config.js文件，然后在其中进行配置

单个js文件的简单打包：

module.exports = {
    entry:'./js/index.js',//入口文件
    output:{
        filename:'main.js',    //输出的文件名
        path : __dirname + '/dist'    //输出文件路径
    },
}

多个js文件分别打包：

module.exports = {
	mode:'production',										//打包模式
    entry:{													//入口文件
		example:'./custom/js/example.js',					
		index:'./custom/js/index.js'
	},														
    output:{												//输出文件
        filename:'[name].js', 								
        path : __dirname + '/static'						//输出目录
    },
	performance: {											//性能
		hints:'warning',		    						//提示
		maxEntrypointSize: 10000000,						//入口起点的最大体积	byte	    	
		maxAssetSize: 6000000,								//生成文件的最大体积		    	
		assetFilter: function(assetFilename) {				//文件过滤
		    	return assetFilename.endsWith('.js');		//给出 js 文件的性能提示
		    }
	},
	watch:false												//监听改变
}

常用配置项：

mode，打包类型，可选‘development’，‘production’。
entry，入口文件，将要打包的文件。
output，输出文件，其中filename表示输出后的文件名，path表示输出路径，_dirname变量为根目录路径，若没有，则会输出到node的安装盘符。
module，配置一些loader，高级功能。
performance，设置一些性能参数，警告，文件大小限制等功能。
watch，监听改变，开启时，文件修改后会自动重新编译

在命令行中进入当前项目根目录，输入以下三种命令之一进行打包

1.    webpack --mode development    //用于开发环境下的打包，预编译，体积更大
2.    webpack --mode production      //用于实际项目上线时执行的打包，会进行压缩，体积更小
3.    webpack  //可以在配置项设置好，直接输入webpack

打包结果如图，并且在项目根目录下会自动创建dist文件夹，并输出main.js文件，然后直接在html页面引入，使用效果和index.js相同
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="dist/main.js" ></script>
    </body>
</html>

凌风子夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4的安装配置及其使用

webpack4的安装配置承接上文，上部分关于npm的链接以管理员身份在命令行窗口输入 npm install webpack -g，系统就会自动下载该安装包，-g代表全局安装。为了使用webpack命令，我们还需要安装webpack-cli，输入npm i -g webpack-cli，系统自动安装完成webpack-cli。在命令行中输入webpack-version，就可以看到安...
复制链接

扫一扫