摘要:我們也可以不用在命令行里面輸入,因為我們可能以后會查詢更多東西,因此我們可以,在的里面加入這里的和只是為了輸出進度條和,沒有實際意義,然后在命令行輸入就可以默認使用進行打包了。更具體的就請查看一下官方文檔了,畢竟篇幅不能太長。
Webpack
網上有很多webpack的介紹,也有不少的視頻,但是不少人看到應該還是不是很了解webpack里面到底是講什么,而且報錯了之后也是不知所措
概述那么這里我作為一個工具小白就闡述一下小白面前應該怎么學習webpack吧,當你看完之后,我相信對其他工具也會有更深的了解
在我的文章里主要講解:
webpack基本介紹及安裝
webpack基本配置和配置文件
webpack在項目中如何自動生成html文件
強大的loader加載器
還有更多的功能我也會在文中提及到
附:webpack官網地址[英文官網][中文官網]
1.webpack基本介紹及安裝 1.1 webpac基本介紹Webpack是時下最流行的模塊打包器
它的主要任務就是將各種格式的JavaScript代碼,甚至是靜態文件進行分析、壓縮、合并、打包,最后生成瀏覽器支持的代碼
用一張圖片簡單表示一下
特點:
代碼拆分方案:webpack可以將應用代碼拆分成多個塊,每個塊包含一個或多個模塊,塊可以按需異步加載,極大提升大規模單頁應用的初始加載速度
智能的靜態分析:webpack的智能解析器幾乎可以處理任何第三方庫
Loader加載器:webpack只能處理原生js模塊,但是loader可以將各種資源轉換為js模塊
plugin插件:webpack有功能豐富的插件系統,滿足各種開發需求
快速運行:webpack 使用異步 I/O 和多級緩存提高運行效率,使得它能夠快速增量編譯
1.2 webpack的安裝綜合來說webpack綜合了目前網絡上的打包工具的優點,但是也要合理使用,不然也會適得其反
第一步,首先得安裝好node.js和npm
npm是前端開發者必備的下載工具吧,如果你連這個也沒有安裝的話,那么你就得快點安裝了,這里附一個gulp打包工具的教程,這里第一和第二步有node.js和npm的安裝具體教程,如果你沒有安裝,那就得快點入門了。
第二步,進入webpack世界
首先,新建一個webpack-test文件夾作為你的項目目錄
然后,用npm初始化你的項目,進入cmd,切換到你的目錄下,輸入:
npm init
然后會出現一大堆輸入的東西,這里我們全部選擇默認輸入enter就好了
輸入完了之后,它會提示你輸入的信息給你核對,按下確認之后,就會在你的項目目錄下生成了package.json
下一步,我們在我們的文件夾里面安裝一下webpack吧,在項目目錄下的cmd輸入
npm install webpack --save-dev
這就安裝好了,這里就給大家來一個小Demo,讓大家更加了解webpack的打包方式吧,如果已經有基礎的同學可以跳過這里
1.3 webpack幾個小Demo在webpack-test下新建一個hello.js,輸入下面的代碼
//自定義一個函數 function hello (str) { alert(str); }
然后在命令行輸入
webpack hello.js hello.bundle.js
這里的意思是用webpack文件將hello.js打包成hello.bundle.js輸出在根目錄下,成功之后在根目錄下就會出現hello.bundle.js文件
然后介紹一下我們打包成功的各個東西的含義吧
然后再在根目錄下新建一個world.js,在文件里輸入
//隨便自定義一個函數 function world () { }
再去修改hello.js成為
require("./world.js") //連接到另外一個函數塊 //自定義一個函數 function hello (str) { alert(str); }
再輸入一下
webpack hello.js hello.bundle.js
進行打包之后就會發現,打包成功里面hello.js的chunks序列號是0,world.js的chunks序列號是1,然后在hello.bundle.js看到他們的序列號也是這樣。
那么如果我想也把css文件也打包進去應該怎么辦呢?
我們再在根目錄下新建一個style.css,在里面簡單輸入
html, body { padding: 0; margin: 0; }
然后這里我們需要下載兩個loaders加載器,為什么要下載loaders加載器呢,你也可以想一想,css文件和js文件畢竟不一樣,如果在hello.js引入style.css那么肯定會報錯,這個時候,我們需要一種東西幫忙加載我們的css成js
接下來我們下載兩個loaders加載器,后面說一下這兩個的作用,在命令行輸入
npm install css-loader style-loader
然后把hello.js改成
require("./world.js") //連接到另外一個函數塊 require("css-loader!./style.css") //利用css-loader加載器解析css文件使之可讀 //自定義一個函數 function hello (str) { alert(str); }
再在輸入一下指令,打包好了后了可以觀察hello.bundle.js里面就多了css文件里面的內容
這時候,你也許會覺得,我說了那么多,那么,怎么把這些東西用到我們的頁面中嗎?下面就會說到
在我們的跟目錄下新建一個index.html,加入下面內容
webpack
再把我們的style.css改成
html, body { padding: 0; margin: 0; } body { color: red; }
再把我們的hello.js改成
require("./world.js") //連接到另外一個函數塊 require("style-loader!css-loader!./style.css") //利用css-loader加載器解析再用style-loader解析css文件使之可讀 //自定義一個函數 function hello (str) { alert(str); } hello("hello webpack");
然后我們再打包運行一下,就可以在頁面看到我們的結果,這時候如果你細心,就會發現我們在css-loader前面加了個style-loader,如果你不加的話,你就會發現你的頁面打開后不是紅色的,因為還沒經過style-loader的解析,當然這只是一種方法,還有其他方法可以自尋在官網看看文檔。
如果你覺得每次修改之后打包也很麻煩,這時候我們的watch就有作用了,你可以在打包后面加入,例如輸入
webpack hello.js hello.bundle.js --watch
然后下次修改就不用在進行輸入打包代碼了,這上面也就是簡單的介紹了一下我們的webpack是怎么從一個文件鏈接到很多文件的。
2.webpack基本配置和配置文件這里就是我們最重要的一個部分了,如果你看過很多webpack打包后的開源項目之后,你就會發現,有些時候你不知道從哪里看起,那就從配置文件開始看起來吧
相信你應該也在不少的文章中看到有關于配置文件的說法的吧,畢竟配置文件也算是最重要的一部分了,這里也可以推薦你看一篇我覺得還不錯的webpack入門
不過我如果你沒有基礎的話,建議繼續看下我的再去看那一篇,收獲會更大
首先,我們新建一個項目webpack-demo,按照我上面教程文章里面下載安裝好webpack,安裝完了之后,我們需要新建幾個文件以及文件夾,如下面所示
然后在index.html輸入
webpack demo
在webpack.config.js也就是webpack的配置文件里面輸入
// webpack.config.js module.exports = { entry:"./src/script/main.js", //我們的入口文件,相當于前面一節webpack-test中的hello.js output:{ path: __dirname + "/dist/js", /*打包完了之后,把內容輸出到這個文件夾上,也可以寫成"./dist/js", 但是這樣放在服務器上路徑可能會出錯,所以加上__dirname*/ filename: "bundle.js" //輸入到上面path文件夾里面的bundle.js,沒有則自動新建 } }
再在main.js里面輸入
//main.js function helloworld () { alert("hello world"); } helloworld();
在命令行輸入webpack,就將我們的入口文件及其鏈接文件(這里還沒有)打包輸出在dist/js目錄下面的bundle.js文件了。
這就是我們的配置文件的最簡單的用法,以后我們還可以在里面配置很多loaders,甚至更復雜的打包,下面一步步說明吧。
我們也可以不用在命令行里面輸入webpack,因為我們可能以后會查詢更多東西,因此我們可以,在package.json的script里面加入:
"webpack":"webpack --config webpack.config.js --progress --color"
這里的--progress和--color只是為了輸出進度條和color,沒有實際意義,然后在命令行輸入npm run webpack就可以默認使用webpack進行打包了。
還有更多關于我們入口文件和輸出文件的介紹,我建議看一下慕課網的這個視頻會更加了解webpack配置文件
3.webpack在項目中如何自動生成html文件在說這個之前,我們為什么要自動生成html頁面?我們直接用index.html不就可以了?但是實際項目往往是有多個頁面的,不過這里我們就簡單介紹一個頁面怎么自動生成,多個也是同樣的原理,我們先來安裝一個插件html-webpack-plugin,我們在命令行輸入:
npm install html-webpack-plugin --save-dev
然后把我們的webpack.config.js里面修改成
// webpack.config.js var htmlWebpackPlugin = require("html-webpack-plugin")//引入我們的插件 module.exports = { entry: { main: "./src/script/main.js", }, //我們的入口文件,相當于前面一節webpack-test中的hello.js output:{ path: __dirname + "/dist/js", /*打包完了之后,把內容輸出到這個文件夾上,也可以寫成"./dist/js", 但是這樣放在服務器上路徑可能會出錯,所以加上__dirname*/ filename: "[name]-[hash].js" //輸入到上面path文件夾里面的bundle.js,沒有則自動新建 }, plugins:[ new htmlWebpackPlugin() //對插件進行實例化 ] }
然后,在我們的dist下面就有了一個項目自動生成的inex.html文件了
但是如果你細心就可以發現這個時候的index.html和我們原來的index.html沒有任何的聯系,這時候我們需要修改我們配置文件中的插件實例化那里修改成
plugins:[ new htmlWebpackPlugin({ template: "index.html" }) //對插件進行實例化 ]
再打包一次之后,就會發現生成的dist目錄下面的index.html文件就會綁定了其他js文件。更具體的就請查看一下官方文檔了,畢竟篇幅不能太長。
4.強大的loader加載器前面我們也有所提到我們的loader加載器,但是實際中是怎么樣的呢,這里我圍繞我們項目經常利用babel-loader轉換ES6
Loaders需要多帶帶安裝并且需要在webpack.config.js下的modules關鍵字下進行配置,Loaders的配置選項包括以下幾方面:
test:一個匹配loaders所處理的文件的拓展名的正則表達式(必須)
loader:loader的名稱(必須)
include/exclude:手動添加必須處理的文件(文件夾)或屏蔽不需要處理的文件(文件夾)(可選);
query:為loaders提供額外的設置選項(可選)
首先,新建一個工程webpack-loader吧,然后將項目用npm初始化后,再在項目下下載webpack,然后構建好下面的這些目錄
用npm下載一下html-webpack-plugin插件
npm install html-webpack-plugin --save-dev
修改我們的index.html成
Document
layer.html
this is a layer
layer.js
// import tpl from "./layer.html" function layer () { return { name: "layer", tpl: tpl } } export default layer;
app.js
//app.js import layer from "./component/layer/layer.js"; //導入layer //使用ES6語法 const App = function () { console.log(layer); } new App()利用babel-loader轉換ES6
Babel其實是一個編譯JavaScript的平臺,它的強大之處表現在可以通過編譯幫你達到以下目的:
下一代的JavaScript標準(ES6,ES7),這些標準目前并未被當前的瀏覽器完全的支持;
使用基于JavaScript進行了拓展的語言,比如React的JSX
首先,我們先安裝Babel在命令行輸入
npm install --save-dev babel-loader babel-core
再安裝一下babel中的latest這里我們需要用到
npm install --save-dev babel-preset-latest
修改我們的配置文件webpack.config.js
var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { main: "./src/app.js", }, //我們的入口文件,相當于前面一節webpack-test中的hello.js output:{ path: __dirname + "/dist/js", /*打包完了之后,把內容輸出到這個文件夾上,也可以寫成"./dist/js", 但是這樣放在服務器上路徑可能會出錯,所以加上__dirname*/ filename: "bundle.js" //輸入到上面path文件夾里面的bundle.js,沒有則自動新建 }, module: { loaders: [ { test: /.js$/, //匹配所有的js文件 loader: "babel-loader", //引用lbabel插件 } ] }, plugins: [ new htmlWebpackPlugin({ filename:"index.html", template:"index.html", inject:"body" //將script標簽加載進body }) ] }
再在我們的package.json下加入
{ //... "babel": { "presets": ["latest"] }, //... }
在命令行輸入webpack,就可以在我們的dist目錄下面的js里面看到我們的配置文件已經有了這些文件
其他加載器css,less,sass等的原理也是一樣,這里就不一一介紹了
有興趣的話,可以繼續看看慕課網的視頻,在下也是受人啟發。
還有更多的加載器可以在我們的webpack官網進行查詢,這里我就不進行多解釋了
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84304.html
摘要:我們也可以不用在命令行里面輸入,因為我們可能以后會查詢更多東西,因此我們可以,在的里面加入這里的和只是為了輸出進度條和,沒有實際意義,然后在命令行輸入就可以默認使用進行打包了。更具體的就請查看一下官方文檔了,畢竟篇幅不能太長。 Webpack 網上有很多webpack的介紹,也有不少的視頻,但是不少人看到應該還是不是很了解webpack里面到底是講什么,而且報錯了之后也是不知所措 那么...
摘要:本文最早為雙十一而作,原標題雙大前端工程師讀書清單,以付費的形式發布在上。發布完本次預告后,捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起,幫助我們設計快速響應的網絡應用,而非簡單的頁面。 本文最早為雙十一而作,原標題雙 11 大前端工程師讀書清單,以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流,現免費分享到這里,不足之處歡迎指教...
摘要:本文最早為雙十一而作,原標題雙大前端工程師讀書清單,以付費的形式發布在上。發布完本次預告后,捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起,幫助我們設計快速響應的網絡應用,而非簡單的頁面。 本文最早為雙十一而作,原標題雙 11 大前端工程師讀書清單,以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流,現免費分享到這里,不足之處歡迎指教...
摘要:本文最早為雙十一而作,原標題雙大前端工程師讀書清單,以付費的形式發布在上。發布完本次預告后,捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起,幫助我們設計快速響應的網絡應用,而非簡單的頁面。 本文最早為雙十一而作,原標題雙 11 大前端工程師讀書清單,以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流,現免費分享到這里,不足之處歡迎指教...
閱讀 3243·2021-10-27 14:20
閱讀 2525·2021-10-08 10:05
閱讀 1625·2021-09-09 09:33
閱讀 2902·2019-08-30 13:16
閱讀 1435·2019-08-29 18:34
閱讀 1171·2019-08-29 10:58
閱讀 1228·2019-08-28 18:22
閱讀 1226·2019-08-26 13:33