玩轉webpack3.x之入門篇

時間 2019-12-06

標籤 webpack3.x webpack 入門简体版

原文原文鏈接

1、webpack簡介

隨着前端的項目愈來愈龐大複雜，js代碼再也不像過去那樣簡單，而是變得十分龐大，特別是當單頁應用的出現，一個前端的項目可能須要大量的模塊來支持，這就致使你的項目的代碼文件的會很是的多，這個時候項目初次加載性能方面肯能會比較差，這個時候就須要使用一些優化手段，好比說webpack打包。html

2、webpack全局安裝

安裝webpack以前須要準備一下ndoe的環境，以及npm包管理工具
當上面兩項準備好以後就能夠開始安裝webpack了在cmd中輸入npm install -g webpack@3.3.5
安裝好以後輸入webpack -v就會顯示版本號
這樣就安裝完畢了！

3、webpack局部安裝（推薦使用這個！！！）

打開cmd輸入npm init
以後會有這麼幾個東西彈出來

項目名稱
項目版本號
git倉庫
關鍵字
做者
許可
建立package.json

上面這一套組合結束以後咱們的項目中會出現這麼一個文件package.json
咱們以前在cmd中輸入的一些內容就在這裏了，做者、版本號、描述均可以在這裏進行修改。前端
而後咱們就能夠開始局部安裝webpack了在項目文件的cmd中輸入npm i -s-dev webpack@3.6.0就能夠了安裝成功後咱們會在package.json中看到這麼一段代碼 node
若是安裝報錯那麼注意三個問題webpack

看看你node的版本是否太低若是你的node的版本在6如下那麼請先更新如下你的node的版本到6以上。
網絡問題，有的地區的網絡屏蔽掉了npm的網址因此安裝不成功，解決方法就是去使用淘寶鏡像cnpm。網址：https://npm.taobao.org/ 這個裏面有安裝方法。
再有就是操做系統的權限問題若是你的系統的權限不是管理員權限的話會出現安裝失敗的狀況。

4、創建基本的webpack項目結構

當咱們上面的安裝步驟完成以後咱們的項目的目錄會變成這樣：git

在開始建立咱們的項目以前咱們先來安裝一個插件live-server安裝方法以下：web

打開cmd在其中輸入npm i -g live-server這個是安裝全局的live-server。npm

那麼接下來就能夠開始咱們項目的構造了：json

首先在項目中建立兩個文件夾，一個叫src用來存放源文件，一個叫dist用來存放打包以後的項目文件

那麼接下來咱們在dist文件夾中建立一個文件叫index.html的文件裏面引入一個bundle.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="a"></div>    <script src="bundle.js"></script>
</body>
</html>
複製代碼

而後在src文件夾中建立一個叫main.js的文件做爲webpack打包的入口文件內容的話隨意寫一下輸出一個‘你好webpack’
```
document.getElementById('a').innerHTML='<h1>你好webpack</h1>'複製代碼
```

接下來就是打包的關鍵步驟了打開cmd切到項目的文件夾下輸入這樣一行命令

//簡單的解釋一下這個命令就是將src下的main.js文件打包到dist下打包後的文件名叫bundle.js
webpack src/main.js dist/bundle.js
複製代碼

接下來就是使用咱們一開始安裝的插件了live-server在cmd中輸入live-server就會自動建立一個服務器而且打開瀏覽器這個時候咱們能夠再瀏覽器上看到一個目錄
打開dist，就能夠看見你好webpack瀏覽器
到這裏咱們的webpack項目已經搭建完畢也首次的打包好了咱們的項目。bash

5、經過配置的方法來進行webpack的打包

上面的一通操做雖然也是將咱們的項目成功的打包，可是操做的方式很麻煩，可是在真正的項目項目中是不會使用這種方法來打包，太low了不夠酷炫，接下就使用一個酷炫的方法來進行打包，那就是經過配置文件的方法來進行打包。

可是若是咱們想要玩這個操做的話首先得會一點node的知識，就是node的核心模塊的使用，不須要知道的太多隻須要知道怎麼導入核心模塊，而後path這個具名模塊有什麼用就好了。

首先咱們接着在上面的項目的根目錄下建立一個文件叫webpack.config.js內容以下

//引入node的path模塊，path這個模塊其實也就是取到文件的路徑進行各類操做const path=require('path');module.exports={    //項目入口    entry:{        //這裏的entry的內容就是你的入口文件的文件路徑        entry:'./src/main.js'    },    //出口    output:{        //這裏的path的這個方法是獲取文件的絕對路徑        //這個__dirname是node的一個全局變量他的做用就是存儲文件所在目錄的完整路徑        //這樣作是爲了方便項目的開發        path:path.resolve(__dirname,'dist'),        //這filename就是打包後的文件名稱        filename:'bundle.js'    }}複製代碼

以上步驟完成以後就能夠再cmd中直接輸入webpack這個指令就能夠進行打包啦！最後的效果和以前的效果是同樣的。

若是說這個配置的打包方式就只有這個功能的話，那可能還體現不出來它的優點那麼接下來的的這個操做就能夠明顯體現出它的優點了，若是說我想要一次打包多個文件呢？

仍是接着上面的項目繼續去寫，在webpack.config.js文件中去進行修改

//引入node的path模塊 const path=require('path');module.exports={    //項目入口    entry:{        //這裏的entry的內容就是你的入口文件的文件路徑        //這裏的       main:'./src/main.js',        main1:'./src/main1.js'
    },    //出口    output:{        path:path.resolve(__dirname,'dist'),        //這filename使用[name].js就是設置打包好以後的文件和入口文件路徑所設置的名字同名        filename:'[name].js'    }}複製代碼

而後去寫一個main1.js內容就寫一個彈框alert('你好啊！')
webpack打包

6、webpack-dev-server服務器配置

上面的項目我所使用的服務器是live-server這個服務器，其實webpack本身是有服務器的這個服務器，並且很是方便與開發，由於他支持熱部署，接下來我來介紹一下這個怎麼使用。

安裝webpack-dev-server

打開cmd切換到項目輸入npm install webpack-dev-server@2.8.2 --save-dev注意我這裏是選擇了版本的，若是你不去寫版本的話，他會直接給你安裝webpack4的webpack-dev-server，這個和webpack3是徹底不一樣，webpack4和webpack3徹底不同，雖然都是webpack。

使用webpack-dev-server

你若是想要使用webpack-dev-server那麼你首先得有webpack.config.js這個webpack的配置文件，我接下來的內容是接着上面的項目繼續改造的。

你須要在webpack.config.js添加上devServer這個對象

//引入node的path模塊 const path=require('path');module.exports={    //項目入口    entry:{        //這裏的entry的內容就是你的入口文件的文件路徑        //這裏的        main:'./src/main.js',        main1:'./src/main1.js'
    },    //出口    output:{        path:path.resolve(__dirname,'dist'),        //這filename使用[name].js就是設置打包好以後的文件和入口文件路徑所設置的名字同名        filename:'[name].js'    },    module:{},    plugins:[],    devServer:{        //你所須要服務的項目的更新        contentBase:path.resolve(__dirname,'dist'),        //服務器ip地址        host:'192.168.5.100',        //服務器壓縮        compress:true,        //項目端口號        port:8080    }}複製代碼

這樣就算是把配置文件寫好了接下來就是須要在package.js中去寫一下命令由於你直接在cmd中去輸入命令webpack-dev-server是沒有用的在scripts中配置一下你

package.json

{  "name": "webpacktest",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "server": "webpack-dev-server"  },  "author": "",  "license": "ISC",  "devDependencies": {    "webpack": "^3.6.0",    "webpack-dev-server": "^2.8.2"  }}
複製代碼

最後在cmd中去輸入命令npm run server,這樣webpack-dev-server服務器就動了！

注意：webpack-dev-server雖然支持熱部署可是你須要注意下你的webpack的版本，若是你的版本是3.6.0一下的那麼webpack-dev-server是不支持熱部署的。

這個暫時就先到這裏，下一篇內容主要就是項目中經常使用的一些操做了！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。