新手入门，webpack入门详细教程

第一步，要使用webpack，首先要安装node.js，https://nodejs.org/en/ 官网直接下载即可，具体安装教程，可以参考菜鸟教程 https://www.runoob.com/nodejs/nodejs-install-setup.html

第二步，在本地新建一个工程目录，打开cmd进入项目根目录，执行 npm init --yes来初始化最简单的模块化开发项目

第三步，安装webpack，执行npm i –D webpack 或者 npm -i –-save-dev webpack，稍等片刻，出现如图所示提示，说明安装成功，可以执行webpack -v查看所安装的webpack版本。

用这个命令安装的webpack只是安装到本项目，每次新建项目都需要重新按步骤安装一次，如果不希望各个项目重新安装，则执行npm webpack -g，安装webpack到全局，则可以在任何一个地方共用一个webpack可执行文件

到此为止，咱们就可以使用webpack啦。

第四步：新建入口函数main.js，至于放在哪个目录下面，随便，我放在src/js/main.js里，随便写一个简单的函数

function show(){
	document.write("webpack初体验");
}
show();

第五步：在根目录下新建webpack.config.js文件，这个目录不能随便变动，因为webpack在执行构建时默认会从项目根目录下的webpack.config.js文件中读取配置。

const path=require('path');
module.exports={
	//JavaScript执行入口文件,
	entry:'./src/js/main.js',
	//需要指定一下输出的路径path和输出的文件名filename
	output:{
		filename:'bundle.js',   //自定义输出文件名
		path:path.resolve(__dirname,'./dist')  //自定义输出文件所在目录
	}
}

第六步，执行webpack打包命令 webpack，却没有成功提示需要安装webpack-cli，输入yes即可
再次输入webpack命令运行，结果还是没成功，提示需要设置模式mode，于是乎我又研究了一下mode用法

简单来说，webpack有两种模式，development（开发环境使用）和production（生产环境使用），解决办法有以下几种：
1.package.json中设置：

"scripts": {
    "dev": "webpack --mode development",  // 开发环境
     "build": "webpack --mode production",  // 生产环境
  },

2.webpack.config.js中设置：

const path=require('path');
module.exports={
	//JavaScript执行入口文件,
	entry:'./src/js/main.js',
	//需要指定一下输出的路径path和输出的文件名filename
	output:{
		filename:'bundle.js',   //自定义输出文件名
		path:path.resolve(__dirname,'./dist')  //自定义输出文件所在目录
	},
	//设置mode
	 mode: 'development' // 设置mode
}

3、直接用打包命令设置，即webpack -d（开发环境）或者webpack -p（生产环境）即可

在根目录下面出现./dist/bundle.js文件，说明打包成功

第七步，验证打包成功，在任意目录下面，新建任意html文件，这里以index.html为例，引入bundle.js文件，在浏览器中打开，正常运行！到此为止，webpack的入门体验结束！

<!DOCTYPE html>
<html>
<head>
	<title>webpack初体验</title>
</head>
<body>

</body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/maolaixin/article/details/84102122
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-30 12:12:45
阅读 ( 1490 )
分类：Go入门教程

新手入门，webpack入门详细教程

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看