webpack概念

概念

• webpack是一個現代javascript應用程序的靜態模塊打包器，
• webpack處理應用程序時他會遞歸的構建一個依賴關係圖，其中包含應用程序的每一個模塊，而後將這些模塊打包成一個或者多個build文件

重要的四個概念

1. 入口（entry）
2. 輸出（output）
3. loader(處理非js文件)
4. 插件（plugins）

入口（enter）

告訴webpack 使用那個模塊 來做爲構建內部依賴圖的開始！進圖入口文件後，webpack會找到那些模塊和庫是入口起點（直接或者間接）的依賴！

例子：

module.exports = {
  entry: './path/to/my/entry/file.js'    // 咱們的入口文件
};

出口（output）

output告訴webpack從哪裏產出builds 以及如何命名這些文件 默認值是 ./dist。這樣整個應用程序結構都會編譯到你指定的文件夾中。

例子

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'        // 打包後的js名稱
  }
};

loader

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

本質上 webpack loader 是將 全部類型的文件 轉化爲 應用程序依賴圖（最終的bundle） 能夠直接進行引用。

webpack loader 倆個參數

1. test 用於標識出應該被對應的 loader 進行轉換的 某個 或者某個文件
2. use 標識轉換時應該使用那個loader

例子:

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'        // 打包後的js名稱
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

解釋：
raw-loader webpack 的原始模塊 將文件加載爲字符串
module 這塊的配置告訴 webpack 在打包過程當中 遇到【require 或者 import】語句被解析爲 ·.txt·的時候 請用·raw-loader· 轉換一下

插件（plugins）

loader 能夠用來轉換某些類型的模塊，而插件則能夠執行範圍更廣的任務.
插件的範圍包括：

1. 打包優化
2. 壓縮
3. 從新定義環境中的變量

使用一個插件 只須要 require 它。 而後給它添加到 plugins 數組中。 多數插件能夠經過 options 來定義。
注意：若是你在一個配置文件中屢次的使用同一個插件時，這時候須要經過new 操做符來重建一個新的實例。

例子：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html 須要npm 安裝一下
const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),                // 壓縮js
    new HtmlWebpackPlugin({template: './src/index.html'}) // 指定模板
  ]
};

模式

經過 development 或 ·production· 之中的一個 來設置 mode 參數， 來啓動 webpack 內置的優化

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