[webpack]初覽webpack

webpack

概念

webpack 是一個打包工具。工做中不少時候由於時間關係，咱們都有本身的任務，webpack配置的工做通常都是老大來解決。但是爲了提升本身的競爭力，我以爲仍是要抽時間來認真瞭解一下wepack。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

配置

webpack須要別人告訴它要怎麼作，也就是配置。通常寫在webpack.config.js中。配置項中最重要的有四大項：

1. 入口
2. 輸出
3. loader
4. 插件

入口[entry]

入口是webpack讀取文件的起點，他會進入入口而後根據依賴關係，找到用到的文件，處理打包。最終輸出到bundles文件。

1.單個入口

module.exports = {
    // 指定入口
  entry: './path/to/my/entry/file.js'
};
module.exports = {
    // 指定入口
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

2.對象語法

對象語法會比較繁瑣。然而，這是應用程序中定義入口的最可擴展的方式。

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

出口[output]

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./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'
  }
};

2. 多個入口起點

假如入口配置了多個，出口要用佔位符[name]來辨別輸出的文件。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 寫入到硬盤：./dist/app.js, ./dist/search.js

loader

webpack 自身只理解 JavaScript,但是實際中咱們會須要處理不少別的文件，如css,less,vue等等。這就是須要用loader。它是把這些文件轉譯成webpack能理解的文件。

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

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
      // 定義了一個模塊 test和use是必須的配置。它告訴webpack遇到txt後綴文件，先用raw-loader處理一下。
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

當中raw-loader須要本身下載。

npm install --save-dev raw-loader

loader的使用方式有三種。配置，內聯，cli。當中配置是最直觀明顯的。loader還能夠在配置中指定多個 loader。

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

插件[plugins]

實際上處理轉譯，webpack還須要實現打包，壓縮等各類功能。這就要用到插件了。

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

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;s

因爲插件能夠攜帶參數/選項，你必須在 webpack 配置中，向 plugins 屬性傳入 new 實例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //經過 npm 安裝
const webpack = require('webpack'); //訪問內置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

模式[model]

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

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