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
- 閱讀 ( 658 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章