webpack入門——構建簡易版vue-cli

用vue-cli1/2搭建一個vue項目時，能夠看到有不少關於webpack配置的文件。咱們不須要知道那些繁瑣的配置文件有什麼做用，只需在控制檯輸入npm run dev，項目自動啓動，咱們就能夠愉快的寫業務代碼了。

雖然vue-cli幫咱們作好了一切，咱們就能不用學webpack了嗎？NoNoNo...現代前端工程師必備的技能就是模塊化構建打包項目，不信去那些招聘網站的前端JD看看。廢話很少說，下面讓咱們用webpack構建一個簡單的vue-cli。

 

第一步：安裝NodeJS（webpack基於NodeJS）

下載地址：http://nodejs.cn/download/，傻瓜式安裝，一直下一步就ok。安裝完畢，在控制檯輸入node -v檢查是否按照成功。

NodeJS是JavaScript的運行環境，像瀏覽器同樣。安裝以後能夠經過node命令運行JavaScript代碼，好比：node a.js

npm（node package manage of JavaScript）做用：Node.js下載後自帶npm，相似於迅雷下載資源，能夠下載項目所需的依賴模塊/包。

1. 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
2. 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
3. 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。
   
   npm是國外的，可能會比較慢，建議安裝cnpm，安裝方法：npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：npm init初始化生成package.json

1. 首先創建一個空的項目文件夾，
2. 進入文件夾，shift+右擊，出現【在此處打開命令窗口(W)】，
3. 點擊進入cmd控制檯，命令路徑即爲當前文件夾目錄，
4. 而後輸入npm init -y，回車，以後會在根目錄建立一個package.json。
   
   package.json用來存放整個項目的依賴模塊/包，當咱們把整個項目遷移到別的地方使用時，項目運行時會根據package.json的依賴參數自動下載所需模塊/包。

第三步：安裝webpack

命令：npm install webpack@3.12.0 --save-dev

測試webpack在本地是否可用，webpack -v若是出現webpack爲無效命令，則使用全局安裝webpack：npm install webpack@3.12.0 -g。安裝成功後就能夠使用webpack命令玩耍了。

建議安裝wepack3，webpack4對vue-cli的兼容還不是很好

webpack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。

第四步：webpack打包模塊

不少文件類型，好比vue、css、img、字體...須要咱們配置相應的loader才能完成正確解析並打包。

好比，把css打包到js文件中，須要安裝css加載器，安裝命令：npm install --save-dev style-loader css-loader
css-loader 和 style-loader，兩者處理的任務不一樣
css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能
style-loader將全部的計算後的樣式用<style></style>加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中 

命令行打包（不推薦）：

webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自動建立dist目錄

這種打包方式，在js文件中引入css文件時要註明loader：require('style-loader!css-loader!../css/index.css') 注意順序不能錯！ 

配置文件打包（推薦）：
須要在項目的根目錄建立webpack.config.js.項目裏配置以下：

module.exports = { entry: __dirname + "/src/main.js",// 入口文件，能夠多個 output: { path: __dirname + "/dist", // 絕對路徑，打包後的文件存放的文件夾 filename: "build.js" // 相對路徑，打包後輸出的文件 }, 　 // 1. 不一樣webpack版本配置loader的方式不一樣，webpack3用loaders，webpack4用rules // 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就能夠寫成 require('../css/index.css') 　module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(jpg|png|jpeg|svg)$/, loader: 'url-loader', options: { // 大於10000字節會被打包成重命名的圖片資源，不然打包成base64 limit: 10000 // name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['env'], // 處理關鍵字，es6/7/8/9...都能轉化 plugins: ['transform-runtime'] // 處理函數 } } ] } }

package.json中配置scripts:{"build": 'webpack'}（webpack命令會默認運行webpack.config.js文件），執行npm run build便可打包

第五步：搭建webpack服務器

上面4步就能夠完成項目的打包任務，可是開發環境還須要更進一步配置。

webpack-dev-server能夠像php/java/.net...同樣搭建爲咱們搭建一個服務器，這樣就能夠熱更新項目代碼，實現實時運行項目，進而方便咱們調試項目。

1. 安裝： npm install webpack-dev-server -g
2. 寫入到依賴： npm install webpack-dev-server --save-dev
3. 配置命令：scripts:{"dev": 'webpack-dev-server --hot --inline'} // 實現熱更新和在線編譯
4. 運行命令：npm run dev
5. 輸入localhost:8080/運行... // webpack-dev-server的默認端口是8080

具體代碼見：https://github.com/tzy13755126023/webpack-vue-cli

最後，webpack版本更新很頻繁，各類npm包也更新很頻繁，這就會致使一個兼容問題，動不動就報錯，這點很讓人頭疼，很容易會致使從入門到放棄。