webpack介紹和使用

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

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

devDependencies 節點下的模塊是我們在開發時需要用的，比如項目中使用的 gulp ，壓縮css、js的模塊。這些模塊在我們的項目部署后是不需要的，所以我們可以使用 -save-dev 的形式安裝。官網：www.webpackjs.com/concepts/

webpack的四個概念

入口entry

新建一個項目文件，在目錄下新建webpack.config.js文件，根據這個配置文件里的配置內容進行處理項目有關文件。編寫此文件，需要遵循commonJS的規范。可以直接執行Git命令webpack來運行，如果是其他的名字，執行webpack--config 打包文件名命令來打包。

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

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

出口output

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

//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位哈希值。

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

配置文件

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

loader

處理非JavaScript文件，比如.less文件，.css文件等。 本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。 配置兩個屬性：text 和 use。

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

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

//webpack.config.jsconst 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.jsconst 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-pluginmini-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中 確認開啟 輪詢請求jsif(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…

轉載于:https://juejin.im/post/5d070f1a5188256e1c70c759

總結

以上是生活随笔為你收集整理的Webpack介绍和使用(配置环境变量，打包依赖)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。