webpack初級指北

By Flavio Copes | Jun 14, 2018

原文

什麼是webpack

webpack是一個打包js模塊的工具。也被稱爲模塊打包工具

它會把許多文件打包生成一個或多個文件來運行你的app

它能作許多事情

• 幫助你打包資源
• 熱加載
• 可以跑Babel而後轉成es5，容許你使用js最新的特性而無需擔憂兼容性問題
• 能把CoffeeScript轉成js
• 能把內聯圖像轉成數據URIs
• 容許你在css文件裏使用require（）
• etc......

webpack不只用於前端，並且也用於node.js後臺

Webpack是一個更有針對性的工具。 只須要指定應用程序的入口點（它甚至能夠是帶有腳本標記的HTML文件），webpack會分析文件並將它們捆綁在一個JavaScript輸出文件中，其中包含運行應用程序所需的全部內容。

安裝webpack

全局安裝

yarn全局安裝：

yarn global add webpack webpack-cli
複製代碼

npm：

npm i -g webpack webpack-cli
複製代碼

安裝完成後，只須要跑如下命令

webpack-cli
複製代碼

本地安裝

推薦本地安裝webpack，由於這樣就可以針對每一個項目的須要自行更新webpack。

yarn：

yarn add webpack webpack-cli -D
複製代碼

npm：

npm i webpack webpack-cli --save-dev
複製代碼

安裝完成後，在package.js文件加入如下代碼：

{ 
  //... 
  "scripts": { 
    "build": "webpack" 
  } 
}
複製代碼

而後你就能夠在項目的根目錄執行如下命令運行webpack

yarn build
複製代碼

webpack設置

從webpack4開始，若是你沒有特殊要求，無需更改配置，webpack會按照默認配置進行打包：

• 你的app入口在./src/indec.js
• 輸出在./dist/main.js
• webpack按照生產模式來打包

若是有須要，你能夠本身配置。webpack的配置文件在項目的根目錄，叫webpack.config.js

入口

默認app的入口是在./src/index.js，在如下位置更改入口配置：

module.exports = {
  /*...*/
  entry: './index.js'
  /*...*/
}
複製代碼

輸出

默認的輸出是在./dist/main.js，下面這個例子輸出改爲app.js：

module.exports = {
  /*...*/
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
  /*...*/
}
複製代碼

使用webpack容許你在js使用import或require語句，不只在js中使用，其餘文件也可使用（好比說css文件）

webpack的目的是幫咱們管理好全部的依賴，不只是js。使用loaders是一種方法

舉個例子：

import 'style.css'
複製代碼

loader的配置就是：

module.exports = {
  /*...*/
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
    }]
  }
  /*...*/
}
複製代碼

這個正則匹配全部的css文件

能夠這樣設置loader：

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

你能夠加多幾個loaders：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use:
          [
            'style-loader',
            'css-loader',
          ]
      }
    ]
  }
  /*...*/
}
複製代碼

在這個例子中，css-loader解釋css中的import‘style.css’語句。style-loader則用

<style>
複製代碼

在dom裏面插入css

順序很重要，並且它是相反的（最後一個是先執行）。

固然，還有不少其餘的loader

常見的有加載Babel的loader，專門把代碼轉成es5:

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
  /*...*/
}
複製代碼

這個例子讓Babel預處理咱們全部的React / JSX文件：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ]
  }
  /*...*/
}
複製代碼

Plugins

Plugins跟loaders相似，但有些不一樣。他們能作loaders作不到的事情，而且是webpack的主要構建塊

module.exports = {
  /*...*/
  plugins: [
    new HTMLWebpackPlugin()
  ]
  /*...*/
}
複製代碼

HTMLWebpackPlugin插件能夠自動建立HTML文件並添加輸出JS包路徑，所以能夠爲JavaScript提供服務。

還有個有用的插件，CleanWebpackPlugin，在建立任何輸出以前清空dist/文件夾，所以在更改輸出文件的名稱時不要留下文件：

module.exports = {
  /*...*/
  plugins: [
    new CleanWebpackPlugin(['dist']),
  ]
  /*...*/
}
複製代碼

webpack mode

mode（在Webpack 4中引入）設置Webpack工做的環境。它能夠設置爲開發或生產（默認爲生產，所以只能在轉移到開發時設置它）。

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

開發模式：

• 打包很是快
• 對比於生產模式更少配置項
• 不刪註釋
• 提供更加細節地報錯信息
• 提供良好的debugging體驗

生產模式構建較慢，由於它須要生成更好的打包。 生成的JavaScript文件的大小較小，由於它刪除了許多生產中不須要的東西。

我作了一個示例應用程序，只打印一個console.log語句。

生產模式：

開發模式：

Watching changes

當應用程序發生更改時，Webpack能夠自動重建打包，而且它會一直監聽更改。

只需加入如下代碼

"scripts": {
  "watch": "webpack --watch"
}
複製代碼

run

npm run watch
複製代碼

或者

yarn run watch
複製代碼

監視模式的一個很好的功能，只有在構建沒有錯誤時才從新打包。若是有錯誤，watch將繼續監聽更改，並嘗試重建打包，但當前的包不會受到這些有問題的構建的影響。

Handling images

Webpack容許使用文件加載器加載圖片。

簡單地配置：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
  /*...*/
}
複製代碼

容許你這樣子導入你的圖片：

import Icon from './icon.png'

const img = new Image()
img.src = Icon
element.appendChild(img)
複製代碼

file-loader可以處理其它類型的文件，好比：fonts、CSV、XML等等。

生成Source Maps

因爲Webpack打包壓縮了代碼，所以必須使用Source Maps來獲取引起錯誤的原始文件的引用。（譯者：sourcemap是爲了解決開發代碼與實際運行代碼不一致時幫助咱們debug到原始開發代碼的技術。）

使用devtool屬性來生成Source Maps：

module.exports = {
  /*...*/
  devtool: 'inline-source-map',
  /*...*/
}
複製代碼

devtool有許多其餘的值，最經常使用的值以下：

• none：不加載Source Maps
• source-map：ideal for production, provides a separate source map that can be minimized, and adds a reference into the bundle, so development tools know that the source map is available. Of course you should configure the server to avoid shipping this, and just use it for debugging purposes
• inline-source-map: ideal for development, inlines the source map as a Data URL