從無到有構建vue實戰項目（四）

6、webpack的安裝和配置

1. 爲了快速構建vue項目，webpack是一個必不可少的工具，咱們先來安裝它，附上官網地址：https://www.webpackjs.com/

   要安裝最新版本或特定版本，請運行如下命令之一：

   npm install --save-dev webpack
   npm install --save-dev webpack@<version>

   若是你使用 webpack 4+ 版本，你還須要安裝 CLI:

   npm install --save-dev webpack-cli

   如下的 NPM 安裝方式，將使 webpack 在全局環境下可用：

   npm install --global webpack

   在這裏，我推薦使用全局安裝，這樣能夠避免後面使用過程當中讓你意想不到的各類個問題。

2. 接下來咱們對webpack進行簡單的配置：

   咱們先理解四個核心概念：

   • 入口(entry)
   • 輸出(output)
   • loader
   • 插件(plugins)
   • 模式

   入口(entry)

   ---

   入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

   每一個依賴項隨即被處理，最後輸出到稱之爲 bundles 的文件中，咱們將在下一章節詳細討論這個過程。

   能夠經過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。默認值爲 ./src。

   看一個 entry 配置的最簡單例子:

   webpack.config.js

   module.exports = {
     entry: './path/to/my/entry/file.js'
   };

   出口(output)

   ---

   output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你能夠經過在配置中指定一個 output 字段，來配置這些處理過程：

   webpack.config.js

   const path = require('path');
   
   module.exports = {
     entry: './path/to/my/entry/file.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'my-first-webpack.bundle.js'
     }
   };

   咱們經過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及咱們想要 bundle 生成(emit)到哪裏。可能你想要了解在代碼最上面導入的 path 模塊是什麼，它是一個 Node.js 核心模塊，用於操做文件路徑。

   loader

   ---

   loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

   本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。

   在 webpack 的配置中 loader 有兩個目標：

   1. test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
   2. use 屬性，表示進行轉換時，應該使用哪一個 loader。

   webpack.config.js

   const path = require('path');
   
   const config = {
     output: {
       filename: 'my-first-webpack.bundle.js'
     },
     module: {
       rules: [
         { test: /\.txt$/, use: 'raw-loader' }
       ]
     }
   };
   
   module.exports = config;

   以上配置中，對一個單獨的 module 對象定義了 rules 屬性，裏面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 以下信息：

   「嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析爲 '.txt' 的路徑」時，在你對它打包以前，先使用 raw-loader 轉換一下。」

   插件(plugins)

   ---

   loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

   想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的一個實例。

   webpack.config.js

   const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
   const webpack = require('webpack'); // 用於訪問內置插件
   
   const config = {
     module: {
       rules: [
         { test: /\.txt$/, use: 'raw-loader' }
       ]
     },
     plugins: [
       new HtmlWebpackPlugin({template: './src/index.html'})
     ]
   };
   
   module.exports = config;

   模式

   ---

   經過選擇 development 或 production 之中的一個，來設置 mode 參數，你能夠啓用相應模式下的 webpack 內置的優化

   module.exports = {
     mode: 'production'
   };

7、本項目中的webpack.config.js的基本配置和出錯狀況

1. 先來看個人基礎配置（最終版）：

var path = require('path')  // 引入操做路徑模塊
const VueLoaderPlugin = require('vue-loader/lib/plugin') //引入vue-loader
module.exports = {
    mode: 'development',
    // 輸入文件
    entry: './src/main.js',
    output: {
        // 輸出目錄
        path: path.resolve(__dirname, 'dist'),
        // 靜態目錄,從這裏取文件
        publicPath: '/dist/',
        // 文件名
        filename: 'index.js'
    },
    module: {
        rules: [
            //解析vue後綴文件
            {
                test: /\.vue$/, 
                loader: 'vue-loader'
            },
            //用巴babel解析js文件 排除模塊安裝目錄的文件
            {
                test: /\.js$/, 
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                include: '/src',
                exclude:'/node_modules/'
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
              },
            {
 
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader' 
                },
                {
                    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                    loader: 'file-loader'
            }
        ]
    },
    plugins: [
        // 請確保引入這個插件！
        new VueLoaderPlugin()
      ]
}

而後在以上配置過程當中，出現了一系列的問題：

出現這個錯誤是由於每一個 vue 包的新版本發佈時，一個相應版本的 vue-template-compiler 也會隨之發佈。編譯器的版本必須和基本的 vue 包保持同步，這樣 vue-loader 就會生成兼容運行時的代碼。這意味着你每次升級項目中的 vue 包時，也應該匹配升級 vue-template-compiler。

你應該將 vue-loader 和 vue-template-compiler 一塊兒安裝——除非你是使用自行 fork 版本的 Vue 模板編譯器的高階用戶：

npm install -D vue-loader vue-template-compiler

而後在webpack.config.js中分別寫入：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module: {
    ...
  plugins: [
    // 請確保引入這個插件！
    new VueLoaderPlugin()
  ]
}

很明顯，該錯誤是由element-ui引發的，解決這個問題咱們只須要插入這樣一段語句：

{
                    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                    loader: 'file-loader'
            }