Webpack介紹和使用(配置環境變量，打包依賴)

時間 2019-11-17

原文原文鏈接

webpack介紹和使用

webpack是一個前端模塊化打包工具，它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。主要由入口，出口，loader，plugins四個部分。javascript

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。css

devDependencies 節點下的模塊是咱們在開發時須要用的，好比項目中使用的 gulp ，壓縮css、js的模塊。這些模塊在咱們的項目部署後是不須要的，因此咱們可使用 -save-dev 的形式安裝。官網：www.webpackjs.com/concepts/html

webpack的四個概念

入口entry

新建一個項目文件，在目錄下新建webpack.config.js文件，根據這個配置文件裏的配置內容進行處理項目有關文件。編寫此文件，須要遵循commonJS的規範。能夠直接執行Git命令webpack來運行，若是是其餘的名字，執行webpack--config 打包文件名命令來打包。前端

入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。java

//webpack.config.js中
module.exports = {
  entry: './path/to/my/entry/file.js'
};複製代碼

出口output

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你能夠經過在配置中指定一個 output 字段，來配置這些處理過程：node

//webpack.config.js中
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};複製代碼

在filename中加入[hash:5]表示文件名後會跟上5位哈希值。webpack

output:{
        path:path.resolve(__dirname, 'dist'),
        filename: '[name][hash:5].bundle.js'
    },複製代碼

配置文件

Webpack 在執行的時候，除了在命令行傳入參數，還能夠經過指定的配置文件來執行。默認狀況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個node.js 模塊，返回一個 json 格式的配置信息對象，或者經過 --config 選項來指定配置文件。git

loader

處理非JavaScript文件，好比.less文件，.css文件等。本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。配置兩個屬性：text 和 use。github

test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。web

use 屬性，表示進行轉換時，應該使用哪一個 loader。

//webpack.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.less$/, use:'style-loader','css-loader', 'less-loader' }
      //將less文件解析less，轉成css文件，在轉成嵌入式樣式
      //use中，解析的順序是倒着進行的。
    ]
  }
};

module.exports = config;複製代碼

style-loader是將css-loader打包好的css代碼以<style>標籤的形式插入到html文件中。詳見:juejin.im/post/5a2668…

插件plugins

插件能夠完成更多 loader 不能完成的功能。

插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。

多數插件能夠經過選項(options)自定義。

你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new操做符來建立它的一個實例。

//webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.less$/, use: 'style-loader','css-loader','less-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;複製代碼

使用每一個插件前都要npm命令安裝在該項目文件夾下。

//tree-shaking的插件

uglifyjs-webpack-plugin 壓縮JS代碼

lodash-es //參考https://www.lodashjs.com/

html-webpack-plugin 將須要的js文件放入dist/index.html中

webpack-deep-scope-plugin //深度JS tree-shaking 安裝npm i webpack-deep-scope-plugin 
//參考 https://www.npmjs.com/package/webpack-deep-scope-plugin

mini-css-extract-plugin 打包成外鏈式css文件

purifycss-webpack purify-css 經過正則匹配去掉css中多餘的樣式 //能夠到npm官網搜索插件名，查看使用方法


//css tree-shaking npm要安裝的依賴
postcss PostCSS 是一個用 JavaScript 轉換 CSS 的工具
postcss-loader 向後兼容css加載器
autoprefixer 兼容css屬性 添加前綴
cssnano 壓縮css文件
postcss-cssnext 添加cssnext語法支持複製代碼

//html 的插件

//1.html-webpack-plugin //會在dist文件將index.html從新打包
var HtmlWebpackPlugin = require("html-webpack-plugin");

new HtmlWebpackPlugin({
            filename: "index.html",//插件生成的名字
            template: './index.html',//根據原本的index.html生成模板頁面
            minify: {//壓縮
                removeComments:true,//清理註釋
                collapseWhitespace:true,//清理空格
            }
        }),

//2.clean-webpack-plugin //清理html中的空格
var CleanWebpackPlugin = require('clean-webpack-plugin');
 new CleanWebpackPlugin();//清理空格
 
//3.html-loader
用法：
{
    test:'/\.html$/',
    use:[
        {
            loader:'html-loader',
            options:{
                attrs:['img:src']
            }
        }
    ]
}複製代碼

//處理圖片的插件
url-loader
file-loader
img-loader // https://www.npmjs.com/package/img-loader 根據須要下載不一樣圖片格式的loader 
//例如：
imagemin-mozjpeg
imagemin
//用法：
 {
    loader:'img-loader',
    options:{
        plugins:[
            require('imagemin-mozjpeg')({
                quality:[0.3, 0.5]//壓縮圖片的質量範圍0-1
            }),
        ]
    }
}//壓縮圖片複製代碼

在項目文件中安裝 npm install webpack-dev-server -g

再次安裝局部環境npm install webpack-dev-server -D

執行 webpack-dev-server

webpack-dev-server --open 在默認瀏覽器裏打開

webpack-dev-server --open --color執行完後會有高亮提醒

//在webpack.config.js中
module.exports={
    devServer: {
        contentBase: './dist',//本地服務器所加載的頁面所在的目錄
        port:'8082',
        inline:true,//實時刷新
        hot: true
    }
}

//也能夠在package.json的scripts中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server":"webpack-dev-server --color --open"
  }
//命令行輸入 npm run server 開啓服務器
複製代碼

關於配置本地服務器這裏有篇不錯的博文：www.jianshu.com/p/cbc7d342f…

熱更新

全稱 hot module replace 局部修改正在更新的部分不須要一直髮請求是webpack的內置插件

//在webpack.config.js中
new Webpack.HotModuleReplacementPlugin()
 
//在index.js中 確認開啓 輪詢請求js
 if(module.hot){
    module.hot.accept()
}複製代碼

配置環境變量

開發環境

//方法一：
//在webpak-dev.config.js中
module.exports = {
    mode:'development'
}

/*在命令行中輸入*/ webpack --config webpak-dev.config.js

//方法二：
//在package.json的scripts中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development --color",
    "server":"webpack-dev-server --color --open"

  }
/*命令行輸入*/ npm run dev複製代碼

生產環境

//方法一：
//在webpak-prod.config.js中
module.exports = {
    mode:'production'
}

/*在命令行中輸入*/ webpack --config webpak-prod.config.js

//方法二：
//在package.json的scripts中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",    "prod":"webpack --mode production --color",
    "server":"webpack-dev-server --color --open"
  }
/*命令行輸入*/ npm run prod複製代碼

經過看dist下的main/index.js代碼是否壓縮來判斷是開發環境仍是生產環境

package.json

建立一個項目，新建文件夾後，創建src目錄，建立index.js，在根目錄Git bush here輸入命令npm init -y,初始化npm,-y表示一路yes。

經過 npm 來控制項目及文件, npm run dev 打包開發版本， npm run prod 打包生產版本。

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "run": "webpack",
    "dev": "webpack --mode development",
    "prod": "webpack --mode production "
  },複製代碼

經過npm命令安裝的工具包都在 package.json 文件中的 devDependences 中

//package.json
"devDependencies": {
    "css-loader": "^2.1.1",
    "lodash-es": "^4.17.11",
    "style-loader": "^0.23.1",
    "webpack-deep-scope-plugin": "^1.6.0"
}複製代碼

咱們從Github上，將帶有npm的項目clone下來，在項目的跟目錄下面直接 npm install ，系統會根據package.json裏的依賴包devDependencies屬性，將須要的依賴下載下來。

package-lock.json

歸納很簡單，就是鎖定安裝時的包的版本號，而且須要上傳到git，以保證其餘人在npm install時你們的依賴能保證一致。

根據官方文檔，這個package-lock.json 是在 npm install時候生成一份文件，用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號。

它有什麼用呢？由於npm是一個用於管理package之間依賴關係的管理器，它容許開發者在pacakge.json中間標出本身項目對npm各庫包的依賴。你能夠選擇以以下方式來標明本身所須要庫包的版本

這裏舉個例子：

"dependencies": { "@types/node": "^8.0.33", },

這裏面的向上標號^是定義了向後（新）兼容依賴，指若是 types/node的版本是超過8.0.33，並在大版本號（8）上相同，就容許下載最新版本的 types/node庫包，例如實際上可能運行npm install時候下載的具體版本是8.0.35。

大多數狀況這種向新兼容依賴下載最新庫包的時候都沒有問題，但是由於npm是開源世界，各庫包的版本語義可能並不相同，有的庫包開發者並不遵照嚴格這一原則：相同大版本號的同一個庫包，其接口符合兼容要求。這時候用戶就很頭疼了：在徹底相同的一個nodejs的代碼庫，在不一樣時間或者不一樣npm下載源之下，下到的各依賴庫包版本可能有所不一樣，所以其依賴庫包行爲特徵也不一樣有時候甚至徹底不兼容。

所以npm最新的版本就開始提供自動生成package-lock.json功能，爲的是讓開發者知道只要你保存了源文件，到一個新的機器上、或者新的下載源，只要按照這個package-lock.json所標示的具體版本下載依賴庫包，就能確保全部庫包與你上次安裝的徹底同樣。

package-lock.json | 官方文檔

semver 語義化版本號變動

^ 是npm默認的版本符號, 當你使用npm install --save時, npm會自動在package中添加^加上版本號. 例如: npm install --save angular會在package.json中添加"angular": "^1.3.15".這個符號會告訴npm能夠安裝1.3.15或者一個大於它的版本, 可是要是主版本1下的版本.

~ 一樣被用來作npm得版本控制, 例如~1.3.15, 表明了npm能夠安裝1.3.15或者更高的版本, 與^的區別在於, ~的版本只能開始於次版本號1.3. 它們的做用域不一樣. 你能夠經過npm config set save-prefix='~'將~設置爲默認符號.

>符號主要是用來指定能夠安裝beta版本.

semver版本號 | 官方文檔

webpack學習推薦(這個挺好)：www.cnblogs.com/dashnowords… webpack資源彙總(騰訊web前端團隊)：github.com/webpack-chi…