怎樣使用Webpack對專案進行開發
這次帶給大家怎樣使用Webpack對專案進行開發，使用Webpack對專案進行開發的注意事項有哪些，以下就是實戰案例，一起來看一下。
一.常見打包工具的介紹
#在打包工具中,常見的有RequireJS,browserify,webpack,其中RequireJS是一個JavaScript模組載入器,基予ADM(async module define)規格實作,browserify是一個以在瀏覽器中使用Node.js模組為出發點的工具,而webpack則是一個為前端模組打包建構而生的工具.
二. 工具的使用
#(1)作為npm套件的RequireJS提供了一個可執行的r.js工具,透過命令列執行,使用方式如下:
npm install -g requirejs r.js -o app.build.js
(2)browserify提供的命令列工具,使用如下面所示:
npm install -g browserify browserify main.js -o bundle.js
(3)webpack的使用
如下面所示,使用命令進行安裝與使用,如下所示:
npm install webpack -g webpack main.js -o bundle.js
在上面命令列中,我們進行了簡單的全域安裝webpack和對main.js文件的打包操作
三.專案建置
對前端專案來說,webpack扮演的是建置工具的角色,並不是程式碼依賴,應該被安裝在dev-dependencies中,使用如下命令進行安裝:
npm install webpack --save-dev
在這個示例中,將進行簡單應用的構建,包括兩個js模組
1.生成文本”Hello world”的hello模組(hello.js)
module.exports = 'Hello world';
2.列印文字的index.js模組(index.js)
var text = require('./hello');
console.log(text);和用於在前端瀏覽器中顯示內容的index.html檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="./bundle.js"></script> </body> </html>
在上面的src路徑引入的bundle.js檔案是不存在的,因為還沒有創建,在使用webpack進行創建打包之後的js檔案,如下面所示命令進行創建:
webpack ./index.js bundle.js
在執行完上面指令之後,我們就可以在瀏覽控制台中看到列印出的結果Hello world
這樣,我們就實作了簡單專案的實作原理,打包內容為bundle.js,我們能夠看到打包之後的內容,在這裡就不貼代碼了.
#當然,如果我們寫代碼都是這樣去構建,那麼,作用意義也不大,這就不得不提及webpack的另一個優點了,那就是設定檔的使用,在使用設定檔之前,我們在進行安裝樣式載入器,如下面指令:
npm install style-loader css-loader --save-dev
透過上面的設定,我們就能夠進行樣式的載入
然後我們進行webpack設定檔設定,需要先在專案下建立檔案webpack.config.js檔案,其中內容如下所示:
var path = require('path');
module.exports = {
entry: path.join(dirname, 'index'),
output: {
path: dirname,
filename: 'bundle.js'
},
module:{
loaders: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
};在上面程式碼中,
* entry: 表示專案的入口檔案
* output: 表示建置打包之後的結果輸出,在輸出的物件中仍有多項配置例如上面所使用的輸出路徑和輸出檔名
* module.loaders是對於模組中的loader所使用的配置,值為一個數組,數組的每一項指定一個規則,規則的test字段是正規表示式,若被依賴模組的ID符合該正規表示式,則對依賴進行使用loader轉換.這樣,我們就能夠使用webpack命令進行程式碼的轉換
更多詳細說明請參見( http://www.jb51.net/article/136710.htm)
如下面命令列指令就可以進行程式碼的打包工作webpack
body {
background-color: darkgray;
}// import style from './index.css';
var style = require('./index.css');
var text = require('./hello');
console.log(text); 
当然,webpack也能够通过webpack-dev-server进行项目的实时构建.
使用如下命令进行webpack-dev-server的安装:
npm install webpack-dev-server --save-dev
在安装之后,我们能够配置使用服务器,首先,我们的package.json文件将会更为下面这样,新增内容为:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --inline"
},在添加完这行命令之后,我们就可以使用下面命令进行启动webpack-dev-server服务器了,
npm run start
之后完整的package.json为如下:
{
"name": "react-basics-review",
"version": "1.0.0",
"description": "a practise of react study ",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --inline"
},
"repository": {
"type": "git",
"url": "git+https://github.com/suwu150/react-basics-review.git"
},
"author": "jkwu",
"license": "ISC",
"bugs": {
"url": "https://github.com/suwu150/react-basics-review/issues"
},
"homepage": "https://github.com/suwu150/react-basics-review#readme",
"devDependencies": {
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.5",
"lodash": "^4.17.4",
"mocha": "^3.5.0",
"react": "^15.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}webpack配置文件修改为如下内容:
devServer中常用的配置对象属性如下：
* 1. contentBase：”./” // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可；
* 2. historyApiFallback：true // 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html 页面；
* 3. inline：true // 用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不需要在devServer进行配置的，只需使用特定的URL格式访问即可；不过我们一般还是常用inline模式，在devServer中对inline设置为true后，当我们启动webpack-dev-server时仍要需要配置inline才能生效，这一点我们之后再说；
* 4. hot：true // 启动webpack热模块替换特性，这里也是坑最多的地方，不少博客都将hot设置了true，这里其实如果单单设置为true是不起作用,会报错误的,错误如下图所示:
这是因为在使用的过程中没有使用插件的原因,只需要将下面命令添加到配置文件即可:
plugins:[ new webpack.HotModuleReplacementPlugin(), ],
也就是调用webpack的热模块插件处理.
*5 .port：端口号(默认8080) ；
*6.其他配置信息
–quiet 控制台中不输出打包的信息
–compress 开启gzip压缩
–progress 显示打包的进度
–open 自动打开浏览器
var path = require('path');
const webpack = require ("webpack");
module.exports = {
entry: path.join(dirname, 'index'),
output: {
path: dirname,
filename: 'bundle.js',
publicPath: "/assets/",
},
module:{
loaders: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
],
devServer:{
//我们在这里对webpack-dev-server进行配置
contentBase: "./",
historyApiFallback:true,
inline:true,
hot:true
}
};index.html文件的内容修改为下面面格式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>身在山中不知山高</p> <script src="assets/bundle.js"></script> </body> </html>
也就是将路径进行修改,因为在webpack.config.json文件中进行了服务器路径的配置,修改了 publicPath: "/assets/",项,在命令行执行npm run start能看到服务器正常启动,然后我们去浏览器进行访问,如下所示结果:
至此,我们完成了webpack实时构建的配置,当我们进行修改某一样式文件或者js文件的时候,项目就会重新打包,并且自动刷新加载到浏览器中.
如下面链接提示:,进行实时构建的搭建webpack-dev-server实时搭建
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是怎樣使用Webpack對專案進行開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
VUE3入門教學：使用Webpack進行打包和構建
Jun 15, 2023 pm 06:17 PM
Vue是一款優秀的JavaScript框架，它可以幫助我們快速建立互動性強、高效性好的Web應用程式。 Vue3是Vue的最新版本，它引入了許多新的功能和功能。 Webpack是目前最受歡迎的JavaScript模組打包器和建置工具之一，它可以幫助我們管理專案中的各種資源。本文就為大家介紹如何使用Webpack打包和建構Vue3應用程式。 1.安裝Webpack
Nginx的Web伺服器caddy怎麼使用
May 30, 2023 pm 12:19 PM
Caddy簡介Caddy是一款功能強大，擴展性高的Web伺服器，目前在Github上已有38K+Star。 Caddy採用Go語言編寫，可用於靜態資源託管和反向代理。 Caddy具有以下主要特性：比較Nginx複雜的配置，其獨創的Caddyfile配置非常簡單；可以透過其提供的AdminAPI實現動態修改配置；預設支援自動化HTTPS配置，能自動申請HTTPS憑證並進行配置；能夠擴展到數以萬計的站點；可以在任意地方執行，沒有額外的依賴；採用Go語言編寫，內存安全更有保證。安裝首先我們直接在CentO
如何使用Golang實作網頁應用程式的表單驗證
Jun 24, 2023 am 09:08 AM
表單驗證是Web應用程式開發中非常重要的環節，它能夠在提交表單資料之前對資料進行有效性檢查，避免應用程式出現安全漏洞和資料錯誤。使用Golang可以輕鬆實現網頁應用程式的表單驗證，本文將介紹如何使用Golang來實作網頁應用程式的表單驗證。一、表單驗證的基本要素在介紹如何實作表單驗證之前，我們需要知道表單驗證的基本要素是什麼。表單元素：表單元素是指
Java API 開發中使用 Jetty7 進行 Web 伺服器處理
Jun 18, 2023 am 10:42 AM
JavaAPI開發中使用Jetty7進行Web伺服器處理隨著互聯網的發展，Web伺服器已經成為了應用程式開發的核心部分，同時也是許多企業所關注的焦點。為了滿足日益增長的業務需求，許多開發人員選擇使用Jetty進行Web伺服器開發，其靈活性和可擴展性受到了廣泛的認可。本文將介紹如何在JavaAPI開發中使用Jetty7進行We
怎麼設定nginx保證frps伺服器與web共用80埠
Jun 03, 2023 am 08:19 AM
首先你會有個疑惑，frp是什麼呢？簡單的說frp就是內網穿透工具，配置客戶端以後，可以透過伺服器來存取內部網路。現在我的伺服器，已經用nginx做站了，80端口只有一個，那如果frp的服務端也想使用80端口，那該怎麼辦呢？經過查詢，這個是可以實現的，就是利用nginx的反向代理來實現。補充一下：frps就是伺服器端（server），frpc就是客戶端（client）。第一步：修改伺服器中nginx.conf設定檔在nginx.conf中http{}裡加入以下參數，server{listen80
Web 端即時防擋臉彈幕（基於機器學習）
Jun 10, 2023 pm 01:03 PM
防擋臉彈幕，即大量彈幕飄過，但不會遮擋視訊畫面中的人物，看起來像是從人物背後飄過去的。機器學習已經火了好幾年了，但很多人都不知道瀏覽器中也能運行這些能力；本文介紹在視頻彈幕方面的實踐優化過程，文末列舉了一些本方案可適用的場景，期望能開啟一些腦洞。 mediapipeDemo（https://google.github.io/mediapipe/）展示主流防擋臉彈幕實現原理點播up上傳視訊伺服器後台計算提取視訊畫面中的人像區域，轉換成svg儲存用戶端播放視訊的同時，從伺服器下載svg與彈幕合成，人像
web標準是什麼東西
Oct 18, 2023 pm 05:24 PM
Web標準是一組由W3C和其他相關組織制定的規範和指南，它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化，透過遵循這些標準，可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互，提供更好的使用者體驗和開發效率。
如何從駕駛艙Web使用者介面啟用管理訪問
Mar 20, 2024 pm 06:56 PM
Cockpit是一個面向Linux伺服器的基於Web的圖形介面。它主要是為了使新用戶/專家用戶更容易管理Linux伺服器。在本文中，我們將討論Cockpit存取模式以及如何從CockpitWebUI切換Cockpit的管理存取。內容主題：駕駛艙進入模式查找當前駕駛艙訪問模式從CockpitWebUI啟用Cockpit的管理訪問從CockpitWebUI禁用Cockpit的管理訪問結論駕駛艙進入模式駕駛艙有兩種訪問模式：受限訪問：這是駕駛艙的默認訪問模式。在這種存取模式下，您無法從駕駛艙Web用戶
