使用vue-cli 腳手架快速搭建單頁面組件 -------webpack工具的介紹

在使用vue-cli時咱們先了解一下什麼是webpack。

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

我使用的是webpack2.x版本，官網連接：https://webpack.js.org/

什麼是webpack

webpack是現代JavaScript應用程序的模塊捆綁器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

知道了webpack這個打包工具，那麼不得不提webpack的loader。

什麼是loader?

webpack 的目標是，讓 webpack 聚焦於項目中的全部資源(asset)，而瀏覽器不須要關注考慮這些。webpack 把每一個文件(.css, .html, .scss, .jpg, etc.) 都做爲模塊處理。然而 webpack 只理解 JavaScript。可是 loader 轉換器能夠將各類類型的資源轉換成 JavaScript 模塊。這樣，任何資源均可以成爲 Webpack 能夠處理的模塊。

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

先來看看 loader 有哪些特性？

• Loader 能夠經過管道方式鏈式調用，每一個 loader 能夠把資源轉換成任意格式並傳遞給下一個 loader ，可是最後一個 loader 必須返回 JavaScript。
• Loader 能夠同步或異步執行。
• Loader 運行在 node.js 環境中，因此能夠作任何可能的事情。
• Loader 能夠接受參數，以此來傳遞配置項給 loader。
• Loader 能夠經過文件擴展名（或正則表達式）綁定給不一樣類型的文件。
• Loader 能夠經過 npm 發佈和安裝。
• 除了經過 package.json 的 main 指定，一般的模塊也能夠導出一個 loader 來使用。
• Loader 能夠訪問配置。
• 插件可讓 loader 擁有更多特性。
• Loader 能夠分發出附加的任意文件。

配置（Configuration）

由於 webpack 配置是標準的 Node.js CommonJS 模塊，你能夠以下：

• 經過 require(...) 導入其餘文件
• 經過 require(...) 使用 npm 的工具函數
• 使用 JavaScript 控制流表達式，例如 ?: 操做符
• 對經常使用值使用常量或變量
• 編寫並執行函數來生成部分配置

最簡單的配置

在webpack.config.js頁面配置以下代碼：

var path = require('path');

module.exports = {
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

多個target配置

var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');

var baseConfig = {
  target: 'async-node',
  entry: {
    entry: './entry.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'inline',
      filename: 'inline.js',
      minChunks: Infinity
    }),
    new webpack.optimize.AggressiveSplittingPlugin({
        minSize: 5000,
        maxSize: 10000
    }),
  ]
};

let targets = ['web', 'webworker', 'node', 'async-node', 'node-webkit', 'electron-main'].map((target) => {
  let base = webpackMerge(baseConfig, {
    target: target,
    output: {
      path: path.resolve(__dirname, 'dist/' + target),
      filename: '[name].' + target + '.js'
    }
  });
  return base;
});

module.exports = targets;

具體用法和配置，你們能夠參考webpack的官網：https://webpack.js.org/concepts/configuration/