webpack構建工具(v3.10.0)

背景

很早以前整理的一篇，如今已經使用v4了,做爲本身的一個記錄吧~

你們能夠去官網瞭解最新版本。

版本

v3.10.0

簡介

Webpack 是一個開源的前端打包工具。 將各類靜態資源視爲模塊，並從它生成優化過的代碼。

webpack和Grunt/Gulp的區別

• webpack 是一個模塊打包器(module bundler)，打包器是幫助你取得準備用於部署的 JavaScript 和樣式表，將它們轉換爲適合瀏覽器的可用格式。
• Grunt/Gulp是一個任務執行器(task runner)，任務執行器是用來自動化處理常見的開發任務，例如項目的檢查(lint)、構建(build)、測試(test)。

概念

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugins)

使用Loader的幾種方式

• 配置（推薦）：在 webpack.config.js 文件中指定 loader。

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

複製代碼

• 內聯：在每一個 import 語句中顯式指定 loader。

import Styles from 'style-loader!css-loader?modules!./styles.css';
複製代碼

• CLI：在 shell 命令中指定它們。

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
複製代碼

安裝

yarn add webpack //yarn 
npm install --save-dev webpack //npm安裝最新版本
npm install --save-dev webpack@<version> //npm安裝特定版本
npm install webpack@beta //安裝beta版本
複製代碼

單入口文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

複製代碼

多入口文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

複製代碼

插件

• html-webpack-plugin //打包html
• clean-webpack-plugin //清空文件

Devtool

doc.webpack-china.org/configurati…

熱更新

1. 使用觀察者模式 package.json

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

2. 使用 webpack-dev-server 提供一個簡單的 web 服務器，而且可以實時從新加載(live reloading)

devServer: {
   contentBase: './dist'
 },
複製代碼

以上配置告知 webpack-dev-server，在 localhost:8080 下創建服務，將 dist 目錄下的文件，做爲可訪問文件。

"start": "webpack-dev-server --open",
複製代碼

3. 使用 webpack-dev-middleware

webpack-dev-middleware 是一箇中間件容器(wrapper)，它將經過 webpack 處理後的文件發佈到一個服務器(server)。webpack-dev-server內部使用 webpack-dev-middleware，然而，它能夠做爲一個單獨的包來提供，能夠進行更多的自定義設置來實現更多需求。webpack-dev-middleware 配合 express server

server": "node server.js" 複製代碼

4. 啓用HMR

devServer: {
   contentBase: './dist',
   hot: true
}

new webpack.HotModuleReplacementPlugin()
複製代碼

Tree Shaking

Tree Shaking是移除 JavaScript 上下文中的未引用代碼(dead-code) webpack build時會標識出那些「未引用代碼(dead code)」，但不會刪除它們。 實現刪除，添加壓縮工具(minifier) - UglifyJSPlugin

yarn add uglifyjs-webpack-plugin
或
npm install --save-dev uglifyjs-webpack-plugin
複製代碼

生產環境構建

• 開發環境中，咱們須要實時從新加載(live reloading)或熱模塊替換(hot module replacement)能力、source map 和 localhost server。

• 生產環境，目標是更小的 bundle，更輕量的 source map

• webpack-merge --保留一個「通用」配置

webpack.common.js
webpack.dev.js
webpack.prod.js
複製代碼

"start": "webpack-dev-server --open --config webpack.dev.js",
 "server": "node server.js",
 "build": "webpack --config webpack.prod.js"
複製代碼

代碼分離

有三種經常使用的代碼分離方法：

• 入口起點：使用 entry 配置手動地分離代碼。
• 防止重複：使用 CommonsChunkPlugin 去重和分離 chunk。
• 動態導入：經過模塊的內聯函數調用來分離代碼。

緩存

• 經過使用 output.filename 進行文件名替換

filename: '[name].[chunkhash].js',
複製代碼

• 提取模板

構建性能

• 保持版本最新
• Loaders 將loaders 應用於最少數的必要模塊中

include: path.resolve(__dirname, "src")
複製代碼