**
安装webpack
**
1,桌面新建一个webpack-demo文件夹,点击进入文件webpack-test夹 按下shift+鼠标右键 点击在此处打开命令窗口,如图
2,安装之前确保node已经安装,可以通过node -v来查看node安装的情况和版本,如果没有按装node,先安装node才可以继续进行,安装 npm install -g webpack
//全局安装
npm install -g webpack
如果你这时安装失败了(出现了报错信息),原因如下:
- 检查你node的版本号,如果版本号过低,升级为最新版本。
- 网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习淘宝镜像
3,在命令行继续输入:npm init 一直点击回车键 当出现Is this ok?时 输入yes,然后点击回车键
4,这时可以进入webpack-demo文件,出现package.json文件 如图:
5,这时可以用我们的编译器打开项目:
打开package.json文件
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
6,继续在命令行窗口 输入 npm install –save-dev webpack
npm install --save-dev webpack
这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用。
开发环境and生产环境:
开发环境:在开发时需要的环境,这里指在开发时需要依赖的包。
生产环境:程序开发完成,开始运行后的环境,这里指要使项目运行,所需要的依赖包。
安装好之后,可以看一下webpack版本(注意一下)
在这里说下,有的小伙伴安装好之后,“webpack”出现不是内部或外部命令,也不是可运行的程序或批处理文件。出现这样的情况,我们内心肯定会默默的出现一句脏话,
不用管它 我们可以继续输入:
npm install –save-dev webpack-cli
npm install –global webpack
npm install –global webpack-cli
输入好之后,我们可以查看一下webpack号 使用webpack -v 出现版本号则安装成功
7,我们可以在命令行 继续输入 webpack命令,会出现ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘C:\Users\Administrator\Desktop\webpack-test’ 这个错误
错误原因是webpack入口默认为src/index.js 进入webpack-test文件夹新建文件夹 src,进入src文件新建index.js
在index.js中写上内容:
alert(“webapck test”);
然后回到cmd窗口输入webpack
打包成功 但是还有一个警告 WARNING in configuration The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.是因为使用webpack没有指定mode为 development(开发模式)或者为production(生产模式)
8,这时我们可以在package.json文件中加入:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
然后使用 npm run dev (相当于 webpack –mode development )或者
使用npm run build(相当于 webpack –mode production)
接下开看一下开发模式和生产模式的区别
我们首先看一下开发模式,回到cmd窗口 输入 npm run dev
进入webpack-demo文件夹,发现自动生成了一个dist文件夹,这是webpack默认输出文件位置
这时我们可以用编译器打开main.js文件
9,我们在webpack-demo目录下新建一个index.html,引入main.js看是否可用
<!DOCTYPE html>
<html>
<head>
<title>webpack-test</title>
<script type="text/javascript" src="./dist/main.js"></script>
</head>
<body>
</body>
</html>
我使用的chrome浏览器 打开效果为下图,说明index.js打包成功