Webpack 4 構建大型項目實踐 / 起步

定義

Webpack 是一個 Javascript 應用程序的靜態模塊打包器，它會讀取 Javascript 文件所需依賴，並把他們打包到一個或多個目標文件。

值得注意的是，Webpack 只能解析 Javascript 文件，處理其餘類型文件須要各自的 loader / plugin

安裝

準備安裝 Webpack 以前請確認你已安裝 Nodejs 最新穩定版本，過舊版本可能會缺乏 Webpack 須要的包。

yarn global add webpack
複製代碼

若是須要在命令行中使用 webpack 命令，webpack 4+ 版本還須要安裝 webpack-cli ，如使用時未安裝它會提醒你安裝。

yarn global add webpack-cli
複製代碼

全局使用命令前還須要把 webpack.cmd 所在目錄（yarn bin）添加到環境變量，使用 yarn global bin 查看該目錄具體路徑

命令行打包和配置

• 新建 src.js 文件

  function counter() {
  if (!counter.count) counter.count = 0
    counter.count++
  }
  
  counter()
  
  console.log(counter.count)
  複製代碼

• 打包 src.js 並把打包結果寫入到同目錄下的 dist.js

  webpack src.js -o dist.js --mode="development"
  複製代碼

  -o dist.js 指定生成文件的的路徑和文件名，它能夠拆分爲 --output-path="./" --output-filename="dist.js"

  --mode="development" 指定開發環境，打包後的代碼不壓縮

  事實上像這樣單文件的打包 Webpack 並不能作什麼神奇的事，咱們能夠在 dist.js 中看到，打包生成代碼由兩部分組成： __webpack_require__ 函數和 eval 執行 src.js 源碼。

因爲實際使用時 webpack 配置比較複雜，在命令行中極難閱讀且不能知足全部需求，這裏就再也不繼續展開，後文的重點也將放在如何修改配置文件以應對不一樣需求，更多命令行配置見參考文檔「命令行接口」。

使用配置文件

爲 webpack 指定配置文件有兩種方式：

1. 用 --config 指定配置文件，webpack --config webpack.config.js
2. 使用 Webpack Node.js API ，在 Node.js 代碼中調用 webpack 函數

下方的例子咱們使用第一種方式，實際項目中第二種方式會更常見，由於能夠自定義打包的信息展現（好比等待動畫、日誌），後文我也會講到。

• 新建 webpack.config.js 文件

  const path = require('path')
  
  module.exports = {
    mode: 'development',
    entry: './src.js',
    output: {
      filename: 'dist.js',
      path: path.resolve(__dirname, './')
    }
  }
  複製代碼

• 打包 src.js 並把打包結果寫入到同目錄下的 dist.js

  webpack --config webpack.config.js
  複製代碼

  能夠看到，打包結果和上方同樣。

  Webpack 默認配置文件是當前目錄的 webpack.config.js ，因此上面的命令能夠簡化爲 webpack

參考文檔

• [ Webpack Docs ] 安裝
• [ Webpack Docs ] 起步
• [ Webpack Docs ] 命令行接口