webpack學習之路（一）基礎配置

webpack是什麼？

引自官網：

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

目前版本的主要特性

目前最新的版本是v4.32.2，webpack4升級以後，增長了不少新特性

• 不在支持Node.js 4
• 移除CommonChunkPlugin，增長optimization
• 支持WebAssembly
• 支持多種模塊類型
• 增長mode配置
• 零配置模塊打包
• 更快的構建時間，速度提高了98%

配置

1.entry

webpack是個模塊打包機，不管什麼資源都會被打包成模塊，模塊之間是有引用關係的，因此會構建一個關係依賴圖，那麼咱們須要一個入口文件，從這個入口開始一步一步查找依賴關係，加載模塊。

咱們須要在webpack.config.js配置

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

上面這個例子是一個單入口，也就是單頁應用所使用的配置， 那麼若是是多頁應用，配置就須要改一下

module.exports = {
  entry: {
      index: './path/to/my/entry/list.js',
      list: './path/to/my/entry/list.js'
  }
};
複製代碼

多入口，須要定義成Object對象，key以後還會被使用

2.output

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。

不管是單入口仍是多入口，只能指定一個output

• filename 用於輸出文件的文件名。
• 目標輸出目錄 path 的絕對路徑。

單入口的配置以下

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
複製代碼

多入口配置

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

filename應該使用佔位符來確保每一個文件具備惟一的名稱，佔位符取值就是entry裏的key

3.mode

mode是webpack4新增的特性。 提供兩個選擇：

選項	描述
development	會將 process.env.NODE_ENV 的值設爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin。
production	會將 process.env.NODE_ENV 的值設爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。

綜合來講就是會默認啓用對當前環境設置的默認插件，方便開發或者有利於打包輸出。 能夠直接在webpack.config.js裏配置，也能夠在命令裏直接添加參數

module.exports = {
  mode: 'production'
};
複製代碼

webpack --mode=production
複製代碼

4.loaders

webpack開箱即用的只有js和json兩種文件類型，想要支持其餘文件類型的源代碼轉換就須要loader。好比es6轉換須要babel-loader,css轉換須要css-loader,typeScript轉換須要ts-loader。

loader自己是一個函數，接收源文件做爲參數，返回轉換的結果。

推薦配置，在webpack.config.js文件中指定 loader：

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

注意：多個loader的狀況下，是按照從右到左的順序執行，要注意書寫順序。

5.plugins

插件是 webpack 的支柱功能，是對webpack功能的加強。 能夠作打包文件的優化壓縮，資源的管理，環境變量注入等loader沒法實現的事情。

webpack 插件是一個具備 apply 屬性的 JavaScript 對象。apply 屬性會被 webpack compiler 調用，而且 compiler 對象可在整個編譯生命週期訪問。

換句話說，plugins能夠做用於整個構建過程。

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

webpack.config.js:

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;
複製代碼

連接文章

webpack學習之路（五）loader初識及經常使用loader介紹

webpack學習之路（四）webpack-hot-middleware實現熱更新

webpack學習之路（三）webpack-dev-middleware

webpack學習之路（二）webpack-dev-server實現熱更新

I am moving forward.