window7安装webpack4.8
webpack版本更新之后，安装老是呈现问题，此刻小编就标的目的大师，介绍一种方式
东西/原料
- window7
- git bash
- nodejs
- npm
方式/步调
- 1
起首我们在桌面新建一个文件夹，定名为webpack-project,之后打开git bash
(没有的话，在window系统下，也是可以利用cmd定名的)
- 2
输入 npm init 一向点回车，直到呈现 Is this OK？输入yes回车
npm init 初始化的目标，就是新建一个package.json的文件
- 3
此时我们看一下文件夹的里面，多了一个package.json的文件
- 4
回到我们的git bash 在git bash的号令行，输入 cnpm install --save-dev webpack (这里申明一下 cnpm是淘宝的镜像，不懂的小伙伴，可以百度一下)
- 5
紧接着继续输入
cnpm install --save-dev webpack-cli
cnpm install --global webpack
cnpm install --global webpack-cli
这里的--global暗示的是全局安装的意思
--save-dev暗示的是把安装的插件，放到package.json的文件中，-dev暗示的是在出产情况下利用的
- 6
我们查看一下版本号
$ webpack -v ,若是呈现版本号，那么就申明webpack已经安装当作功了
- 7
$webpack
利用webpack的号令呈现错误
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Administrator\Desktop\webpack-project
呈现问题的原因是，我们在webpack-project的项目中没有找到进口文件 ./src
webpack的进口文件默认是./src/index.js
为此我们需要在webpack-project的项目中，新建一个src的文件夹，在其文件夹下新建一个index.js文件
- 8
在src/index.js的文件夹中，写入工具，这里我写的内容是 alert("webpack test");
我们回到git bash的号令行的界面
再次输入webpack
我们可以看到打包是当作功的了，可是有一个警告，就是说我们没有指心猿意马，情况是出产模式(production)仍是开辟者模式(development)
- 9
也可以在package.json的文件中添加下面的号令
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
在package.json插手这两行的目标就是为了我们可以利用
npm run dev
npm run build
这两个定名
若是不设置装备摆设的话我们也可以利用
webpack --mode development
webpack --mode production
获得的结果是 一样的
- 10
此刻我们来看一下开辟者模式
$ npm run dev
进入到webpack-project文件夹中，我们可以看到多了一个dist的文件夹，在dist的文件夹中，多了一个main.js的文件
- 11
我们利用打开main.js的文件，这是webpack默认输出的js文件格局
- 12
在着我们再看一下出产情况下的main.js的文件
$ run dev build
利用 run dev build 打包的文件，布局很是的紧凑，合用于出产情况
- 13
最后我们在webpack-project的文件夹下新建一个index.html的文件，看看打包的js数据是否可以运行当作功
$ touch index.html
$ vim index.html
- 14
最后在浏览器输出，当作功！
- 发表于 2018-05-21 00:00
- 阅读 ( 656 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章