摘要:新版中將命令行工具拆分到多帶帶的倉庫中,所以需要額外安裝。轉換文件的匹配正則盡量減少文件解析用配置文件解析路徑只轉換或者編譯目錄下的文件不要解析當從包中導入模塊時例如,引入下的庫,此選項將決定在中使用哪個字段導入模塊。
目錄
概述
Big changes
加載loader方法總結
開發必備的loader&plugins
優化向prd進發
未完待續
概述本月迎來了 v4 正式版的發布,本文用于學習新特性和總結開發必用plugin & loader,從dev到prd,走你~Big changes
Environment
Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.
Usage
You have to choose (mode or --mode) between two modes now: production or development
本次新版本中引入了 mode 配置項,開發者可在 none,development(開發 ) 以及 production(產品)三種模式間選擇。該配置項缺省情況下默認使用 production 模式。
development 模式給你極致的開發體驗,包含瀏覽器調試相關工具,極快的增量編譯,豐富全面的報錯信息...
production 模式則包含大量發版優化,代碼壓縮,絲般潤滑的運行時優化,開發相關代碼的排除,易用,etc.
none 不使用預設,等于老版本中全部自己配置的原始狀態。
eg:
webpack --mode development
Usage
Some Plugin options are now validated
CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI
The ProgressPlugin (--progress) now displays plugin names
At least for plugins migrated to the new plugin system
新版中將 webpack 命令行工具拆分到多帶帶的倉庫中,所以需要額外安裝 webpack-cli。
npm init -y //初始化項目 npm install webpack webpack-cli -D //安裝webpack webpack-cli 依賴 npx webpack --mode development // npx可以直接運行node_modules/.bin目錄下面的命令 或者通過配置package.json的script build "scripts": { "build": "webpack --mode development", },加載loader方法總結
use
module: { rules:[ { test: /.css$/, use: ["style-loader","css-loader"] } ] }
css-loader用來解析處理CSS文件中的url路徑,
要把CSS文件變成一個模塊
多個loader是有順序要求的,從右往左寫,因為轉換的時候是從右往左轉換
此插件先用css-loader處理一下css文件,再用style-loader把CSS文件變成style標簽插入head中
loader
module: { rules:[ { test: /.css$/, loader: ["style-loader", "css-loader"] }, ] }
use+loader
module: { rules:[ { test: /.css$/, use:[ { loader:"style-loader"}, { loader: "css-loader", options: {sourceMap: true} } ] } ] }
這三種loader的寫法,最后打包的結果相同
loader中的options配置項可以用"?"跟在加載器后面
eg:
{ test: /.jpeg$/, use: "url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/", }
為以下配置的簡寫
{ test: /.jpeg$/, use: { loader:"url-loader", options:{ limit:1024, name:[path][name].[ext], outputPath:img/ publicPath:output/" } } }開發必備的loader&plugins
css-loader
babel-loader
講ES6代碼轉換為ES5
{ test: /.js/, use: { loader: "babel-loader", query: { presets: ["env", "stage-0", "react"] } } },
babel-loader的預設可以添加在query中,也可以在項目根目錄添加 .babelrc 文件
.babelrc
{ "presets": [ "env", "stage-0", "react" ] }
html-webpack-plugin
插件的基本作用就是生成html文件。原理很簡單:
將 webpack中entry配置的相關入口thunk 和 extract-text-webpack-plugin抽取的css樣式 插入到該插件提供的template或者templateContent配置項指定的內容基礎上生成一個html文件,具體插入方式是將樣式link插入到head元素中,script插入到head或者body中。
const HtmlWebpackPlugin = require("html-webpack-plugin"); new HtmlWebpackPlugin({ template: "./src/index.html",//指定產的HTML模板 filename: `index.html`,//產出的HTML文件名 title: "index", hash: true,// 會在引入的js里加入查詢字符串避免緩存, minify: { removeAttributeQuotes: true } }),
可以用 cnpm search html-webpack-plugin 查找想用loader的用法
less-loader sass-loader
優化向prd進發提取公共的css代碼
它會將所有的入口 chunk(entry chunks)中引用的 *.css,移動到獨立分離的 CSS 文件。因此,你的樣式將不再內嵌到 JS bundle 中,而是會放到一個多帶帶的 CSS 文件(即 styles.css)當中。 如果你的樣式文件大小較大,這會做更快提前加載,因為 CSS bundle 會跟 JS bundle 并行加載。
npm i extract-text-webpack-plugin@next -D
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"); let cssExtract = new ExtractTextWebpackPlugin({ filename: "css/css.css", allChunks: true });
module:{ rules:[ { test: /.css$/,//轉換文件的匹配正則 loader: cssExtract.extract({ use: ["css-loader?minimize"] }) }, ] } plugins:[ ...... , + cssExtract ]
盡量減少文件解析,用resolve配置文件解析路徑,include
rules: { test: /.js$/, loader:"babel-loader", include: path.resolve(__dirname, "src"),//只轉換或者編譯src 目錄 下的文件 exclude: /node_modules/ //不要解析node_modules }
resolve.mainFields
WebpackTest | | | - src | | - index.js | | - lib | | - fetch | | | browser.js | node.js | package.json | | - webpack.config.js
當從 npm 包中導入模塊時(例如,引入lib下的庫),此選項將決定在 package.json 中使用哪個字段導入模塊。根據 webpack 配置中指定的 target 不同,默認值也會有所不同。
package.json
lib文件夾下的package.json中配置相對應模塊的key
{ "name": "fetch", "version": "1.0.0", "description": "", "node": "./node.js", "browser": "./browser.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
webpack.config.js
在resolve解析對象中,加入lib的路徑
resolve: { extensions: [".js", ".json"], mainFields: ["main", "browser", "node"], modules: [path.resolve("node_modules"), path.resolve("lib")] }
index.js
這樣在index.js中引用第三方庫時,會去查找modules下的路徑中是否配置了所需的文件,知道在package.json中找到mainFields中的key對應文件,停止。
let fetch = require("fetch"); console.log(fetch);
打包后 console.log出的對象
如果交換mainFields中的key順序
mainFields: ["main", "node","browser"]
打包后 console.log出的對象,因為找到了key=node對應的文件就停止了查找
DllReferencePlugin
這個插件是在 webpack 主配置文件中設置的, 這個插件把只有 dll 的 bundle(們)(dll-only-bundle(s)) 引用到需要的預編譯的依賴。
新建webpack.react.config.js
const path = require("path"); const webpack = require("webpack") module.exports = { entry: { react: ["react", "react-dom"] }, output: { path: path.join(__dirname, "dist"),// 輸出動態連接庫的文件名稱 filename: "[name]_dll.js", library: "_dll_[name]"http://全局變量的名字,其它會從此變量上獲取到里面的模塊 }, // manifest 表示一個描述文件 plugins: [ new webpack.DllPlugin({ name: "_dll_[name]", path: path.join(__dirname, "dist", "manifest.json")//最后打包出來的文件目錄和名字 }) ] }
在entry入口寫入要打包成dll的文件,這里把體積較大的react和react-dom打包 output中的關鍵是library的全局變量名,下文詳細說明dll&manifest工作原理
打包dll文件
webpack --config webpack.react.config.js --mode development
打包出來的manifest.json節選
打包出來的react_dll.js節選
可見manifest.json中的 name值就是
output:{ library:_dll_react }
manifest.json就是借書證,_dll_react就像圖書館書籍的條形碼,為我們最終找到filename為react_dll.js的參考書
在webpack.config.js中加入“借書證”
new webpack.DllReferencePlugin({ manifest: path.join(__dirname, "dist", "manifest.json") })
再運行
webpack --mode development
打包速度顯著變快
打包后的main.js中,react,react-dom.js也打包進來了,成功~
import React from "react"; //import ReactDOM from "react-dom";
(function(module, exports, __webpack_require__) { "use strict"; eval(" //import name from "./base"; //import React from "react"; //import ReactDOM from "react-dom"; //import ajax from "ajax"; //let result = ajax("/ajax"); //ReactDOM.render(未完待續{result}
, document.getElementById("root")); // fetch fetch.js fetch.json fetch文件夾 //let fetch = require("fetch"); //console.log(fetch); //let get = require("../dist/bundle.js"); //get.getName(); console.log("hello"); var name = "zfpx"; console.log(name); if (true) { var s = "ssssssssssssssssssssssss"; console.log(s); console.log(s); console.log(s); console.log(s); } //# sourceURL=webpack:///./src/index.js?"); /***/ }) /******/ });
webpack.ProvidePlugin
拷貝靜態資源
壓縮css(npm i -D purifycss-webpack purify-css)
覺得好玩就關注一下~歡迎大家收藏寫評論~~~文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93832.html
摘要:添加依賴到如何使用依賴當你再興建一個文件的時候,就不需要一個個插件安裝了,將文件復制到當前文件下,并輸入,即通過里的依賴關系,自動把依賴安裝好了。第四步新建配置文件默認的配置文件在項目目錄下為。 WilsonLius blog 首發地址 前言 早就想嘗試webpack的,卻一直沒有時間,恰逢周末,又時值最近在公司實習的時候嘗到用fekit做模塊化的構建工具的爽。所以就開始以公司的項目結...
摘要:我的入門到放棄之路最近看到很多相關的問題跟討論,越來越多的小伙伴喜歡這個框架了,同時也在看到了有些入門的小伙伴遇到了各種各樣的問題,本人也是框架使用都一枚,公司是騰訊阿里平安三巨頭合資的一家公司,分別上海深圳杭州北京廣州等多個分部,前端人員 showImg(https://segmentfault.com/img/bVbhonB?w=1278&h=722); 我的react入門到放棄之...
摘要:另外備注一部分參數的說明折疊有助于文檔樹中文本節點的空白區域對進行壓縮默認默認按照不同文件的依賴關系來排序。敲黑板講重點的當然目前這部分的文檔在官網還不是很全,所以這里我們參考了印記中文的說明文檔,指優化模塊。 鏈接 寫在前面 為什么要自己手寫一個腳手架? 如何去思考遇到的問題? 正文 鏈接 原文鏈接 github whale-vue ——寫在前面 1、為什么要自己手寫...
摘要:上一章我們了解了的編譯環境搭建項目構建二編譯環境搭建這一章我們會結合的,介紹本地測試服務器的搭建過程。三開發環境有一些特性是專門用于開發環境的,可以幫助我們搭建一個更好的開發環境。我們可以通過配合使用來搭建本地服務。 注:以下教程均在 windows 環境實現,使用其他操作系統的同學實踐過程可能會有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環境搭建:webpack...
閱讀 4913·2023-04-25 18:47
閱讀 2673·2021-11-19 11:33
閱讀 3445·2021-11-11 16:54
閱讀 3101·2021-10-26 09:50
閱讀 2540·2021-10-14 09:43
閱讀 665·2021-09-03 10:47
閱讀 671·2019-08-30 15:54
閱讀 1498·2019-08-30 15:44