-
安裝NodeJS，cnpm
NodeJS安裝不消說，直接下載安裝。
cnpm是npm的國內鏡像，淘寶的。
npm用法不在此說明。npm install cnpm -g -
創建項目
mkdir webpack-demo & cd webpack-demo npm init -y此操作創建webpack-demo目錄,進入並初始化一個node項目，在該目錄下生成package.json文件。
第一個命令的-y選項表示快速初始化項目，不加的話要手動錄入項目名、描述等信息，這些信息都會寫到package.json裏。 -
安裝webpack
cnpm install webpack webpack-cli webpack-dev-server --save-dev此操作在當前項目下安裝webpack、webpack-cli、webpack-dev-server，存放在node_modules文件夾下，並在package.json文件中新增devDependencies信息。
-
編寫業務代碼
以下是來自網絡的一個例子：
創建webpack-demo/dist/index.html<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="main.js"></script> </body> </html>創建webpack-demo/src/index.js
//index.js const greeter = require('./Greeter.js'); document.querySelector("#root").appendChild(greeter());創建webpack-demo/src/index.js
// Greeter.js module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; };其中，src與dist目錄名，輸入文件index.js、輸出文件main.js是webpack默認的名字，當然，可以配置。
在webpack-demo下使用webpack打包：webpack 或 webpack src/index.js -o dist/main.js由於使用了默認的目錄和文件名，所以使用webpack命令就可以打包，也可以手動指明輸入輸出文件。
這樣打包的話，不管哪個命令在下面都會輸出一條警告信息。大體意思是沒有指定打包模式，默認使用了production模式。
打包模式有三種可選：development、production、none，分別是開發、生產、無。
development模式不對代碼進行壓縮，而是放在eval裏。
production模式會對代碼進行壓縮。
none模式基本只是將文件進行連接與閉包。
指明模式，只要在命令最後加上–mode development即可webpack --mode development 或 webpack src/index.js -o dist/main.js --mode development -
查看效果
瀏覽器打開dist/index.html即可看到效果 -
webpack-dev-server的使用
在package.json的scripts裏新增dev與build屬性："scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --inline --hot --progress --content-base ./dist", "build": "webpack --mode production --progress" }webpack-dev-server將打包的輸出放在內存中而不是文件，並且集成了express容器，將以服務器的形式提供開發調試。
inline選項爲整個頁面添加了"Live Reloading"功能，而hot選項開啓了"Hot Module Reloading"功能，能夠實現修改js代碼後不需要重新打包，且不需要刷新頁面就自動重載的功能。至於二者的區別，估計是inline重載的是整個頁面而hot能精確到某個具體模塊。我看前端一般用inline就夠了。
另外，webpack本身也提供–watch選項以支持熱部署，但據說項目大了響應慢。
pregress選項輸出打包過程。
content-base選項指明服務的根目錄。
配置完成之後，可以在webpack-demo目錄下使用npm命令運行腳本：npm run dev 或 npm run build -
webpack配置文件
webpack有一堆的東西可以配置與預處理，這裏只是做個引入。
新建webpack-demo/build/webpack.dev.conf.js//webpack.dev.conf.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve('./dist'), filename: 'main.js' } }修改package.json：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --inline --progress --content-base ./dist --config build/webpack.dev.conf.js", "build": "webpack --mode production --progress --config build/webpack.dev.conf.js" }運行開發模式：
npm run dev
webpack-demo(4.29.6)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
N網下載mod方法: 20240614親測好使
https://www.bilibili.com/video/BV1k8411575T/?vd_source=d68ed178f151e80fea1e02efd205802c