必備技能1、webpack

https://cloud.tencent.com/developer/section/1477376-----》配置很重要

 

1、基本安裝

mkdir webpack-demo && cd webpack-demo  // 建立項目文件夾
npm init -y  // 初始化項目基礎信息
npm install webpack webpack-cli --save-dev  // 安裝最新版本webpack，若是你使用 webpack 4+ 版本，你還須要安裝 CLI----------此安裝爲webpack與webapck-cli一塊兒安裝

 

 package.json

 

若是你使用的是 npm 5，你可能還會在目錄中看到一個 package-lock.json 文件。

 

「源」代碼(/src)———》「源」代碼是用於書寫和編輯的代碼

「分發」代碼(/dist)———》「分發」代碼是構建過程產生的代碼最小化和優化後的「輸出」目錄，最終將在瀏覽器中加載

 

項目：

 

webpack.config.js

 

 

若是 webpack.config.js 存在，則 webpack 命令將默認選擇使用它。咱們在這裏使用 --config 選項只是向你代表，能夠傳遞任何名稱的配置文件。這對於須要拆分紅多個文件的複雜配置是很是有用。

 

 

開發環境必備

source map---當 webpack 打包源代碼時，追蹤到錯誤和警告在源代碼中的原始位置

devtool: 'inline-source-map',

 

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

 devServer: {
+     contentBase: './dist'
+   },

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

 "scripts": {
+     "start": "webpack-dev-server --open", 
      "build": "webpack"
    },

如今，咱們能夠在命令行中運行 npm start，就會看到瀏覽器自動加載頁面。若是如今修改和保存任意源文件，web 服務器就會自動從新加載編譯後的代碼。

 

 webpack-dev-middleware 是一個容器(wrapper)，它能夠把 webpack 處理後的文件傳遞給一個服務器(server)。 webpack-dev-server 在內部使用了它，因此我認爲能夠運行webpack所建立的項目。

模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一 -----》它容許在運行時更新各類模塊，而無需進行徹底刷新。

HMR 不適用於生產環境，這意味着它應當只在開發環境使用。

啓用此功能實際上至關簡單。而咱們要作的，就是更新 webpack-dev-server 的配置，和使用 webpack 內置的 HMR 插件。

+ const webpack = require('webpack');

  module.exports = {
    entry: {
+      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
+     hot: true
    },
+     new webpack.NamedModulesPlugin(),
+     new webpack.HotModuleReplacementPlugin()
    ]
}

或者 --- 》你能夠經過命令來修改 webpack-dev-server 的配置：webpack-dev-server --hotOnly。

 

HMR 修改樣式表

藉助於 style-loader 的幫助，CSS 的模塊熱替換其實是至關簡單的。當更新 CSS 依賴模塊時，此 loader 在後臺使用 module.hot.accept 來修補(patch) <style> 標籤。

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

 

 

 

 

生產環境構建

1.開發和生產環境構建

開發環境(development)和生產環境(production)的構建目標差別很大。

經過「通用」配置(webpack-merge )，咱們沒必要在環境特定(environment-specific)的配置中重複代碼。

npm install --save-dev webpack-merge

project

 webpack-demo
  |- package.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

webpack.common.js

+ const path = require('path');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+ module.exports = {
+   entry: {
+     app: './src/index.js'
+   },
+   plugins: [
+     new CleanWebpackPlugin(['dist']),
+     new HtmlWebpackPlugin({
+       title: 'Production'
+     })
+   ],
+   output: {
+     filename: '[name].bundle.js',
+     path: path.resolve(__dirname, 'dist')
+   }
+ };

webpack.dev.js

+ const merge = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   }
+ });

webpack.prod.js

+ const merge = require('webpack-merge');
+ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   plugins: [
+     new UglifyJSPlugin()
+   ]
+ });

package.json

 "scripts": {
-     "start": "webpack-dev-server --open",
+     "start": "webpack-dev-server --open --config webpack.dev.js",
-     "build": "webpack"
+     "build": "webpack --config webpack.prod.js"
    },

 

 

生產環境

source map

webpack.prod.js

 const merge = require('webpack-merge');
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
+   devtool: 'source-map',
    plugins: [
-     new UglifyJSPlugin()
+     new UglifyJSPlugin({
+       sourceMap: true
+     })
    ]
  });

注意：避免在生產中使用 inline-*** 和 eval-***，由於它們能夠增長 bundle 大小，並下降總體性能。　

 

指定環境(開發和生產)

用於建立編譯時 「配置的全局常量」  以方便進行 環境轉換，配置默認路徑在 webpack.default.dev.conf.js 中 

eg:

new webpack.DefinePlugin({

      'process.env': require('../config/dev.env')

    })；

dev.env.js

module.exports = {

  NODE_ENV: '"development"',

  ENV_CONFIG: '"dev"',

  BASE_API: '"https://api-dev"'

}

在創建 axios 的默認service時

const service = axios.create({

  baseURL: process.env.BASE_API, // api 的 base_url  

//process.env.BASE_API 就是運行時 的動態全局變量

  timeout: 5000 // request timeout

})

 

可查看https://blog.csdn.net/achenyuan/article/details/83378923幫助理解

 

webpack4 - 3.Mode內置優化（開發和生產）

webpack 4以上版本提供了mode配置選項，用來選擇使用相應的內置優化。

mode選項有3個可選值：production （默認） 、development、none。

可使用配置文件來指定mode

module.exports = {
  mode: 'production'
};

也能夠在執行webpack命令時使用參數來指定mode

webpack --mode=production

1.production模式

webpack4在production模式下，會啓用衆多優化插件。

1.1 JS Tree Sharking

UglifyJsPlugin支持Tree Sharking，字面意思爲「搖樹」，在webpack中能夠理解成打包過程當中移除未使用的內容（js、css）。

繼續使用前文的代碼，部分修改以下：

src/index.js

import {test1} from './js/test'
document.body.innerHTML = test1()

src/js/test.js

export default function test1() {
    return "test1..."
}

export default function test2() {
    return "test2..."
}

export default function test3() {
    return "test3..."
}

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
};

執行webpack命令，生成dist/index.js文件，搜索"test1..."、"test2..."、"test3..."均能找到，說明在development模式下，test2()、test3()兩個函數即便未使用，打包後仍是存在的。

接下來嘗試以production模式打包，此次不去修改配置文件，而是執行webpack --mode=production打包，檢查生成的dist/index.js文件，能夠發現僅能找到"test1..."，"test2..."、"test3..."已經不復存在了，並且文件大小也比以前小了不少，說明在production模式下，無用的js內容已經被移除了。

1.2 文件壓縮

webpack4中，UglifyJsPlugin還支持文件壓縮，這裏以jquery爲例實踐。

安裝jquery

 npm install --save jquery

在src/index.js中引入jquery，並使用了jquery的標籤選擇器修改title內容

import $ from 'jquery'
import {test1} from './js/test'
document.body.innerHTML = test1()
$("title").html("title by jquery");

分別使用webpack --mode=development和webpack --mode=production打包

$ webpack --mode=development
Hash: 4fc1ab8359e975a61ce6
Version: webpack 4.18.0
Time: 350ms
Built at: 09/16/2018 5:57:00 PM
   Asset     Size  Chunks             Chunk Names
index.js  306 KiB   index  [emitted]  index
Entrypoint index = index.js
[./src/index.js] 124 bytes {index} [built]
[./src/js/test.js] 151 bytes {index} [built]
    + 1 hidden module

使用development模式打包時，生成的index.js文件大小爲306kb

$ webpack --mode=production
Hash: 3488a0d6f12908778bda
Version: webpack 4.18.0
Time: 2311ms
Built at: 09/16/2018 5:58:00 PM
   Asset      Size  Chunks             Chunk Names
index.js  86.2 KiB       0  [emitted]  index
Entrypoint index = index.js
[1] ./src/index.js + 1 modules 280 bytes {0} [built]
    | ./src/index.js 124 bytes [built]
    | ./src/js/test.js 151 bytes [built]
    + 1 hidden module

使用production模式打包時，生成的index.js文件大小縮減至86.2kb。

總結：webpack4中使用production模式打包時，自動會啓用JS Tree Sharking和文件壓縮。

2.development模式

development模式下，webpack會啓用NamedChunksPlugin 和 NamedModulesPlugin插件。

3.none模式

none模式下，webpack不會使用任何內置優化。

　　

代碼分離

 

動態導入(dynamic imports)

import() 調用會在內部用到 promises。若是在舊有版本瀏覽器中使用 import()，記得使用 一個 polyfill 庫（例如 es6-promise 或 promise-polyfill），來 shim Promise。

 

 

package.json參數詳解

 https://www.jianshu.com/p/0863270e14d4

 

運行

webpack 是編譯打包用於上線。

執行webpack-dev-server 是啓動webpack的服務器，打包後的代碼在內存中，不會輸出到項目目錄，同時具備熱更新的功能。

關於如何使用webpack命令行傳入變量，並在全局經過process.env來調用

 

 

inline：自動刷新
 
--hot：熱加載
 
--port：指定端口
 
--open：自動在默認瀏覽器打開
 
--host：能夠指定服務器的 ip，不指定則爲127.0.0.1