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

時間 2019-11-13

標籤 webpack 入門構建簡易 vue cli 简体版

原文原文鏈接

前言：（面試讓介紹webpack，你能夠這麼答）簡單地說，Webpack其最核心的功能就是 解決模板之間的依賴，把各個模塊按照特定的規則和順序組織在一塊兒，最終合併成一個JS文件（好比bundle.js）。這個整個過程也經常被稱爲是 模塊打包。換句話說，Webpack是一個指令集合的配置文檔，而後經過配置好的這些指令去驅動程序作一些指令要求要作的事情。而這些動做都是經過本身寫的規則去作編譯，並且經過JavaScript的引入（import）語法讓Webpack知道須要它幫忙編譯什麼東西（好比Pug、Sass等等）。因此咱們始終會有一個入口文件（好比index.js）注入那些Preprocess，讓那些Preprocess能夠經過這些入口文件的JavaScript讓Webpack去根據相關的配置指令編譯它，而後打包到一個出口文件中，好比bundles.js。php

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

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

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

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

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

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

容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

npm是國外的，可能會比較慢，建議安裝cnpm，安裝方法：npm install -g cnpm --registry=https://registry.npm.taobao.orgwebpack

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

首先創建一個空的項目文件夾，
進入文件夾，shift+右擊，出現【在此處打開命令窗口(W)】，
點擊進入cmd控制檯，命令路徑即爲當前文件夾目錄，
而後輸入npm init -y，回車，以後會在根目錄建立一個package.json。

package.json用來存放整個項目的依賴模塊/包，當咱們把整個項目遷移到別的地方使用時，項目運行時會根據package.json的依賴參數自動下載所需模塊/包。git

第三步：安裝webpack

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

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

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

webpack能夠看作是模塊打包機：全部資源均可以當成模塊，通過loader處理，最後打包成一個文件。

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

webpack核心模塊：

entry: 入口文件，能夠多個
output：出口文件，只能一個
loader：幫助webpack處理js之外的文件
plugins：加強webpack的能力，作更多的事

第四步：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'] // 處理函數
            }
          }
      ]
   }
}