webpack入門(2) - 安裝，配置，環境搭建

webpack入門(1)-「圖解什麼是webpack」傳送門

初始化和安裝

• 在工做目錄新建一個文件夾
• npm init 初始化一個文件夾,出現對話框按肯定就行。
• npm install --global webpack 全局安裝，在c盤下會生成node_modules文件夾中會包含webpack。請注意，這不是推薦的作法。全局安裝會將您鎖定到特定版本的webpack，而且在使用不一樣版本的項目中可能會失敗。官方並不推薦全局安裝。
• npm install --save-dev webpack 安裝在本地開發環境中
• npm install --save-dev webpack-cli webpack4以後要安裝cli。把cli安裝到開發環境中。
• -D就是--save-dev的縮寫

打包一個簡單的文件

• 在文件夾下新建一個src文件,下面新建一個main.js文件。
• 根目錄下新建一個webpack.config.js文件。爲何要建這個文件，由於直接使用webpack，它會尋找webpack.config.js把它當成默認的配置去運行。此時它不須要指定任何參數，就能讀取裏面的內容。

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js',//我指定了入口文件，在src/main.js
    output: { 
        path: __dirname + '/dist', //打包後指定存放的目錄,放在dist
        filename: 'bundle.js' //打包後的文件叫bundle.js
    }
}
複製代碼

__dirname是Node.js中一個全局變量，它指向當前執行腳本所在的目錄。
有多個入口文件的時候：

• 若是你一開始你就不想運行默認的webpack.config.js,你想運行其餘的配置文件,好比config.js文件。你能夠運行webpack --config config.js,這樣它就會尋找config.js，而且運行它。
• 運行webpack，它會自動的尋找webpack.config.js，找到其中的入口文件好比上面的main.js。
• 若是你想有些個性化的需求，你想看到打包的進度，打包的模塊，模塊的信息，打包的緣由。你能夠輸入如下的命令。
  • webpack --progress能夠看到打包的進度。
  • webpack --progress --display-modules 能夠看到打包有幾個模塊，模塊的信息。
  • webpack ---progress --display-modules --display-reasons 打包的緣由顯示出來。
• 可是這種方法太過繁瑣，你要在命令行輸入這麼多東西。那麼有沒有更輕鬆的方法呢？有的！
  • 在你初始化的時候，系統會自動生成package.json。如今找到根目錄下的package.json文件。

    

  • 在裏面的scripts下添加定義一個腳本，

  "dev":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
  複製代碼

  • 最後在命令行運行npm run dev 由於scripts腳本提供了命令的「別名」，像上面的以一個「dev」命令代替了一連串的命令，使用起來更爲方便,即使你沒有在命令行輸入以上的配置，你依然能夠看到打包的進度；以看到打包有幾個模塊，模塊的信息；字體爲彩色；打包的緣由。由於你在配置文件下定義了，就不須要了。

更快捷的執行打包任務

• 最原始的執行打包任務，可使用命令webpack main.js bundle.js在這個例子當中，main.js是入口文件，bundle.js 打包完以後的文件。
• 第二種，咱們能夠在webpack.config.js裏寫配置。

module.exports = {
  entry:  __dirname + "/app/main.js",//惟一入口文件
  output: {
    path: __dirname + "/public",//打包後的文件存放的地方
    filename: "bundle.js"//打包後輸出文件的文件名
  }
}
複製代碼

咱們只須要輸入webpack命令，webpack就能本身找到webpack.config.js，在找出入口，找到output,執行打包。

• 第三種，繼承第二種。更簡單快捷的執行打包。在package.json裏找到「scripts」腳本，添加

"start": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
複製代碼

而後咱們只須要npm start就能夠打包了。

須要注意的是,「start」在npm中比較特殊，只需npm start 就能夠執行命令。若是是非start,還要再在前面加上一個run ,好比npm run dev,npm run build

搭建開發環境

使用source maps進行調試調試

爲什麼要使用source maps？

由於webpack對源代碼進行打包後，會對源代碼進行壓縮、精簡、甚至變量名替換，在瀏覽器中，沒法對代碼逐行打斷點進行調試，全部須要使用source maps進行調試，它使得咱們在瀏覽器中能夠看到源代碼，進而逐行打斷點調試。

如何使用source maps？

在配置中添加devtool屬性，賦值爲source-map或者inline-source-map便可，後者報錯信息更加具體，會指示源代碼中的具體錯誤位置，而source-map選項沒法指示到源代碼中的具體位置。

使用開發工具

用開發工具能夠簡化開發過程的工做。好比你寫完代碼後保存開發工具能夠自動幫你執行一系列的命令。

watch模式

在使用webpack-cli進行打包時，經過命令webpack --watch便可開啓watch模式，進入watch模式以後，一旦依賴樹中的某一個模塊發生了變化，webpack就會從新進行編譯。

使用webpack-dev-server

瀏覽器監聽你的代碼的修改，並自動刷新顯示修改後的結果。它是一個單獨的組件，在webpack中進行配置以前須要單獨安裝它做爲項目依賴。

• 安裝。npm install --save-dev webpack-dev-server
• 修改配置文件，添加devServer屬性

// webpack.config.js
  module.exports = {
      devServer: {
          contentBase: './dist',//本地服務器所加載的頁面所在目錄
          historyApiFallback: true,//不跳轉
          inline: true //實時刷新
      }
  };
複製代碼

• 在package.json 添加腳本

// package.json
  {
      "scripts": {
          "start": "webpack-dev-server --open"
      }
  }
複製代碼

• 運行命令 npm run start便可在本地的8080端口查看結果。
• 搭建開發環境遠不止這些內容，我只挑了我在學習過程當中常常用到的地方，或者我以爲重要的地方。

寫在最後

webpack很難啃，我是在網上找資料看視頻，一點一點摸索。網上的資料時間維度大，有的還在講webpack1.0,有的在講最新版的webpack,因此在整理的時候不免有出錯的地方。歡迎在下方評論指出錯誤！

未完待續...

歡迎訪問個人博客，會分享一些技術文章，一塊兒學習前端。