webpack筆記

搭建項目基礎

使用npm初始化工程，安裝webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

lodash是一個使用的js工具庫

npm install --save lodash

若是沒有webpack配置文件，默認使用src文件夾下的index.js文件做爲入口文件，而後在dist文件夾下生成main.js bundle文件。

Node 8.2+ 版本提供的 npx 命令，能夠運行在初始安裝的 webpack 包(package)的 webpack 二進制文件。雖然webpack4+能夠不使用任何配置文件，但使用webpack配置文件能夠更便捷高效的執行命令。若是webpack.config.js存在，默認使用它。下面--config選項代表使用指定名稱的配置文件，這對須要拆分紅多個配置文件時很是有用。

npx webpack --config webpack.config.js

能夠在package.json中添加npm腳原本提供一個執行上面腳本的快捷方式。使用npm的script能夠像使用npx那樣經過模塊名引用本地安裝的npm包，由於這是大多數基於npm項目的遵循標準。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

運行構建命令，生成bundle

npm run build

管理資源

webpack只識別經過import導入的js文件，可是能夠經過指定的loader引入指定類型的文件。

加載css文件，經過安裝style-loader和css-loader能夠import css文件。

npm install --save-dev style-loader css-loader

在webpack.config.js文件中填加module字段，test經過正則匹配哪些文件須要經過下面的方式加載，use指定加載所使用的loader。

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

如今可使用import導入css文件了

import './style.css';

加載圖片文件，使用file-loader能夠將圖片資源混合到css中

npm install --save-dev file-loader

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }

如今使用下面代碼時圖像資源將被file-loader加載，並處理添加到output目錄中，MyImage變量將包含圖像在處理後的最終url。若是你查看output目錄將會看到相似這樣的圖像資源名5c999da72346a995e7e2718865d019c8.png。

import MyImage from './my-image.png'

使用loader這種方式加載資源，你能夠以更直觀的方式將模塊和資源組合在一塊兒，而不是將資源單獨存放在一個文件夾中，這可使模塊更具備可移植性。

入口起點

入口起點指示webpack使用哪一個模塊，來作爲其構建內部依賴圖的起點。每一個依賴項都會被處理，最後輸出到bundle中。能夠配置單個或多個入口起點，多個入口起點經常使用於分離bundle文件以便按需加載和用於多頁面應用中。

const config = {
  entry: './path/to/my/entry/file.js'
};
module.exports = config;

//上面是下面的簡寫：

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
// 多個入口起點
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

html-webpack-plugin插件 https://www.npmjs.com/package/html-webpack-plugin

npm install --save-dev html-webpack-plugin

能夠在dist文件夾下自動生成index.html文件，並將自動引用構建好的bundle文件。

plugins: [
    new HtmlWebpackPlugin({
      title: 'OutPut Management'
    })
  ],

clean-webpack-plugin插件 https://www.npmjs.com/package/clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

用於清理構建目錄的一個插件，默認會清理output目錄的全部文件。

使用source map

webpack打包源代碼後，很難在bundle文件中找到錯誤在源代碼中爲原始位置。爲了最終錯誤和警告js提供了source map功能，source map有 不少選項可用，例以下面代碼。

devtool: 'inline-source-map'

自動編譯代碼

有多種方式能夠在webpack中自動編譯代碼，例如：

1. webpack's Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

使用觀察者模式

添加一個用於啓動webpack觀察者模式的npm腳本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },

watch模式在每次修改後都會從新編譯模塊，缺點是每次必須手動刷新瀏覽器後才能看到效果。

使用webpack-dev-server

webpack-dev-server提供一個簡單的web服務器，並可以實時重載。

npm install --save-dev webpack-dev-server

修改webpack.config.js，告訴dev server在哪裏查找文件。dev server默認在localhost: 8080建立服務。

devServer: {
    contentBase: './dist'
  }

在package.json中添加啓動代碼

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open",
    "watch": "webpack --watch"
  },

如今運行 npm run start 就能夠自動在瀏覽器中打開頁面，修改代碼保存後，dev server會自動加載編譯後的代碼。

使用webpack-dev-middlewarehttps://www.webpackjs.com/guides/development/

mddleware是一個容器，它能夠把webpack處理後的文件傳遞給一個服務器。webpack-dev-server內部使用了它。使用middleware和express能夠實現相似dev server的功能。

HMR(hot module replacement)模塊熱替換

HMR能夠在不刷新整個頁面的狀況下更新模塊代碼，webpack-dev-server提供的功能是在代碼修改後刷新整個頁面，但會丟失頁面的狀態，HMR填補了這個缺陷。要注意的是在使用HMR時要在module.hot.accept中刷新更新後的代碼，否者應用使用的仍舊是舊的代碼。幸運的是一些經常使用的loader提供了這種功能，例如style-loader內部實現了這個方法，能夠在更新css文件後自動刷新css代碼，而無需從新刷新瀏覽器。

tree shaking

tree shaking 用於移除js上下文中未引用的代碼，tree shaking 須要依賴ES2015模塊系統中靜態結構特性，例如import和export。