第一步,要使用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>