圖解WebPack項目開發基本構建及配置
本篇經驗將和大師介紹WebPack項目開辟根基構建及設置裝備擺設的方式，但愿對大師的工作和進修有所幫忙！
方式/步調
- 1
建立項目文件夾 myapp。
手動建立myapp，或mkdir myapp。
- 2
cd myapp
- 3
npm init （初始化項目）
- 4
一路回車（關于項目信息的填寫，可以不寫，一路回車即可）
可以在此步調中填寫一些項目信息，也可以在第5步調完當作后填寫。
- 5
以上步調竣事，myapp文件夾中建立了package.json文件，如下圖所示：
package.json文件是關于設置裝備擺設的一些申明，包羅：
展示項目npm所依靠的包
項目標根基信息
- 6
npm install webpack --save-dev（安裝webpack），如下圖所示：
- 7
建立頁面文件index.html和進口文件index.js
建立一個index.html存放頁面內容，放到 dist/ 目次下，建立一個index.js進口文件，放到 src/ 目次下。目次布局，如下圖所示：
注：所謂進口文件就是從這個文件中引入的資本城市被Webpack同一打包處置，無論它是圖片資本，樣式資本，仍是JS資本。Webpack會按照設置裝備擺設對分歧類型的資本文件進行分歧體例的處置。
- 8
在根目次下建立 webpack.config.js 文件
使頁面文件index.html和進口文件index.js聯系關系
webpack.config.js文件內容，如下圖所示：
- 9
運行號令 webpack
在窗口輸入 webpack 回車，則編譯并打包響應的文件，當前的目次布局，如下圖所示：
- 10
在頁面文件index.html引入bundle.js文件即可
index.html文件，如下圖所示：
注重： 以上10個步調竣事，一個根基的項目已經構建完當作
- 11
讓頁面主動刷新
npm install --save-dev webpack-dev-server
- 12
簡單設置裝備擺設一下webpack.config.js文件，加上下面設置裝備擺設，如下圖所示：
- 13
運行指令： webpack-dev-server
注重： 完當作以上步調后，就可以進行根基的開辟了，點竄文件可實現頁面主動刷新，之后有需要什么依靠和加載器可以按需安裝并設置裝備擺設即可。
- 發表于 2018-05-06 00:00
- 閱讀 ( 830 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章