webpack配置

webpack配置

1. 安裝

安裝nodejs,運行命令npm intall wepack –g 或者npm install webpack –save-dev進行全局和本地安裝。

安裝指定版本，運行命令npm install webpack@1.12.x --save-dev

若是須要使用webpack開發工具，請自行安裝npm install webpack-dev-server --save-dev

 

2. 查看版本信息

運行 npm info webpack，便可查看webpack基本信息

 

3. 使用

1. 首先建立一個靜態文件index.html,在靜態文件裏面引入bundle.js

2. 建立一個entry.js文件，寫一個alert(‘webpack’);

3. 運行命令 webpack entry.js bundle.js

4. 這樣，bundle.js就能夠生成了

 

5. 運行index.html

  

6. 添加一個模塊，並修改entry.js

   1. 新建module.js,寫入module.exports = 'It works from module.js.'

   2. entry.js添加以下代碼alert(require('./module.js'))

   3. 從新編譯bundle.js,運行index.html

    

4. 原理：

Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每一個模塊分配一個惟一的 id 並經過這個 id 索引和訪問模塊。在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。

編譯後文件以下圖

 

 

（經過對象的賦值和引用，造成一個調用關係鏈）

5. Loader

1. Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換

2. Loader 能夠理解爲是模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。這樣，咱們就能夠經過 require 來加載任何類型的模塊或文件，好比 CoffeeScript、 JSX、 LESS 或圖片。

3. Loader 自己也是運行在 node.js 環境中的 JavaScript 模塊，它一般會返回一個函數。大多數狀況下，咱們經過 npm 來管理 loader，可是你也能夠在項目中本身寫 loader 模塊。正是因爲loader運行在node環境裏面，因此，loader讀取文件變得垂手可得。

4. 按照慣例，而非必須，loader 通常以 xxx-loader 的方式命名，xxx 表明了這個 loader 要作的轉換功能，好比 json-loader。在引用 loader 的時候可使用全名 json-loader，或者使用短名 json。這個命名規則和搜索優先級順序在 webpack 的 resolveLoader.moduleTemplates api 中定義。Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

5. 安裝 loader

1. 運行npm intall css-loader style-loader

2. 新建index.css文件，指定背景色爲green

3. 修改entry.js文件require("!style-loader!css-loader!./style.css")，載入style-loader css-loader

4. 從新打包編譯bundle.js,運行index.html

 

 

5. 若是每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。咱們能夠根據模塊類型（擴展名）來自動綁定須要的 loader。

1. 將 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css")，2. 運行$webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'或者webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"，效果是同樣的

6. 配置文件

1. Webpack 在執行的時候，除了在命令行傳入參數，還能夠經過指定的配置文件來執行。默認狀況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者經過 --config 選項來指定配置文件。

2. 經過npm init，咱們來建立package的基本信息

{

  "name": "webpack",

  "version": "1.0.0",

  "description": "'webapck demo'",

  "main": "bundle.js",

  "dependencies": {

    "css-loader": "^0.28.0",

    "style-loader": "^0.16.1"

  },

  "devDependencies": {},

  "scripts": {

    "test": "'test'"

  },

  "keywords": [

    "'webpack'"

  ],

  "author": "djl",

  "license": "ISC"

}

3. 如上圖所示，爲安裝初始化後的配置信息，咱們看到，沒有webpck的dependencies依賴，是由於咱們安裝的webpack爲全局的，經過wbpack -v咱們來查看一下webpack的版本信息，添加本地環境依賴

 

{

  "name": "webpack",

  "version": "1.0.0",

  "description": "'webapck demo'",

  "main": "bundle.js",

  "dependencies": {

    "css-loader": "^0.28.0",

    "style-loader": "^0.16.1",

    "webpack": "^2.3.3"

  },

  "devDependencies": {},

  "scripts": {

    "test": "'test'"

  },

  "keywords": [

    "'webpack'"

  ],

  "author": "djl",

  "license": "ISC"

}

4. 運行 npm install 便可安裝本地webpack

5. 建立webpack.config.js文件，放置到根目錄下，寫入以下信息

var webpack = require('webpack') //引入webpack模塊

 

module.exports = {//webpack導出模塊

  entry: './entry.js',//入口文件，也就是咱們的entry.js文件，只有這一個

  output: {//輸出目錄配置

    path: __dirname, //當前目錄爲導出文件，若是對node不太熟悉，自行腦補

    filename: 'bundle.js'//導出文件名

  },

  module: { 

    loaders: [//webpack的loader模塊配置

      {test: /\.css$/, loader: 'style-loader!css-loader'}//test爲正則匹配css文件，loader爲loader名稱

    ]

  }

}

6. 最後entry.js咱們只須要require(‘./index.css’),從新運行編譯bundle.js,便可

7. 插件

  1. 插件能夠完成更多 loader 不能完成的功能。

  2．插件的使用通常是在 webpack 的配置信息 plugins 選項中指定。Webpack 自己內置了一些經常使用的插件，還能夠經過 npm 安裝第三方插件

  3. 咱們以BannerPluigin爲例，來給輸出文件添加註釋信息

  4. 修改webpack.config.js文件，在modlue對象下方添加插件以下

     module: {

       loaders: [

         {test: /\.css$/, loader: 'style-loader!css-loader'}

       ]

  },

  plugins: [

       new webpack.BannerPlugin('This file is created by djl')

      ]

}

5. 從新編譯bundle.js，打開文件，咱們已經看到註釋信息了

   

8.開發環境

  1. 當項目逐漸變大，webpack 的編譯時間會變長，能夠經過參數讓編譯的輸出內容帶有進度和顏色webpack --progress --colors

  2. 若是不想每次修改模塊後都從新編譯，那麼能夠啓動監聽模式。開啓監聽模式後，沒有變化的模塊會在編譯後緩存到內存中，而不會每次都被從新編譯，因此監聽模式的總體速度是很快的。webpack --progress --colors –watch

  3. 使用 webpack-dev-server 開發服務是一個更好的選擇。它將在 localhost:8080 啓動一個 express 靜態資源 web 服務器，而且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。

安裝服務工具npm install webpack-dev-server –g  運行webpack-dev-server --progress –colors

 

9. webpack補充說明

  1.entry

entry能夠是個字符串或數組或者是對象。  

當entry是個字符串的時候，用來定義入口文件：

entry: './js/main.js'

 

當entry是個數組的時候，裏面一樣包含入口js文件，另一個參數能夠是用來配置webpack提供的一個靜態資源服務器，webpack-dev-server。webpack-dev-server會監控項目中每個文件的變化，實時的進行構建，而且自動刷新頁面：

entry: [

     'webpack/hot/only-dev-server',

     './js/app.js'

]

 

當entry是個對象的時候，咱們能夠將不一樣的文件構建成不一樣的文件，按需使用，好比在個人hello頁面中只要\引入hello.js便可：

entry: {

     hello: './js/hello.js',

     form: './js/form.js'

 }

 2.output

output參數是個對象，用於定義構建後的文件的輸出。其中包含path和filename：

當咱們在entry中定義構建多個文件時，filename能夠對應的更改成[name].js用於定義不一樣文件構建後的名字。

publicPath：publicPath」項則被許多Webpack的插件用於在生產模式下更新內嵌到css、html文件裏的url值。

path：「path」僅僅告訴Webpack結果存儲在哪裏

 

3. resolve 

webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用於配置程序能夠自行補全哪些文件後綴：

resolve:{

     extensions:['','.js','.json']

 }

4. externals 

當咱們想在項目中require一些其餘的類庫或者API，而又不想讓這些類庫的源碼被構建到運行時文件中，這在實際開發中頗有必要。此時咱們就能夠經過配置externals參數來解決這個問題：

externals: {

     "jquery": "jQuery"

 }

5. loader

 loader的參數項隨插件的不一樣而不一樣，具體請參考具體的插件設置