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. 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包也更新很頻繁，這就會導致一個兼容問題，動不動就報錯，這點很讓人頭疼，很容易會導致從入門到放棄。