NodeJs使用webpack打包專案的方法詳解

2022-02-28 16:06:08

第一步:初始化專案:npminit-y
第二步:新建 src/index.html
第三步:安裝模組Jquery npminstalljquery
第四步:測試隔行換色
第五步:安裝webpack(兩個包)npminstallwebpackwebpack-cli-D(開發模式)
第六步:新建webpack.config.js
第七步:修改package.json(可有可無,執行方式不同)
第八步:執行打包npmrundev

WebPack打包CSS

第一步:安裝處理css的loader:npmistyle-loadercss-loader-D
第二步:修改webpack.config.js:
第三步:引入CSS檔案:`
第四步:執行測試:npmrundev

WebPack自動打包

總結

Webpack

為何要用::友好支援模組化、程式碼混淆、處理js相容、效能優化等…

WebPack的使用

第一步:初始化專案:npm init -y

第二步:新建 src/index.html

第三步:安裝模組Jquery npm install jquery

第四步:測試隔行換色

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行換色</title>
    <script src="./index.js"></script>
</head>
<body>
    <h1>web pack測試</h1>
    <!-- vscode快捷方式:ul>li{第$個li}*10 -->
    <ul>
        <li>第1個li</li>
        <li>第2個li</li>
        <li>第3個li</li>
        <li>第4個li</li>
        <li>第5個li</li>
        <li>第6個li</li>
        <li>第7個li</li>
        <li>第8個li</li>
        <li>第9個li</li>
        <li>第10個li</li>
    </ul>
</body>
</html>

index.js

import $ from 'jquery'
$(function(){
    $('li:odd').css('backgroundColor','green');//odd偶數
    $('li:even').css('backgroundColor','pink');//even奇數
})

執行報錯:

這就是相容性問題

使用webpack打包解決問題官網：https://www.webpackjs.com/

第五步:安裝webpack(兩個包)npm install webpack webpack-cli -D (開發模式)

第六步:新建webpack.config.js

/**
 * webpack  組態檔
 */
module.exports={
    //偵錯時使用development開發模式
    //打包時使用production生產模式
    mode : 'development'   
}

組態檔部分屬性:

預設打包入口:/src/index.js
預設打包出口:/dist/main.js

可進行設定:

/**
 * webpack  組態檔
 */
const path=require('path');
module.exports={
    //偵錯時使用development開發模式
    //打包時使用production生產模式
    mode : 'development',
    entry:  path.join(__dirname,'./src/index.js'),  //__dirname表示當前目錄當前路徑
    output: {
        path: path.join(__dirname,'./dist'),
        filename:'bundle.js',
    },//出口

}

第七步:修改package.json(可有可無,執行方式不同)

package.json

"scripts": {
    "dev":  "webpack"
  },

第八步:執行打包npm run dev

目錄下多出資料夾dist,終端含有’successfully’表示打包成功!

測試

首先修改index.html引入的js包

 <!--<script src="./index.js"></script>-->❌
 <script src="../dist/main.js"></script>

執行:

表明webpack打包成功有效並且解決了相容性問題!!!

WebPack打包CSS

傳統都是用link參照

第一步:安裝處理css的loader:npm i style-loader css-loader -D

根據實際需要安裝對應的載入器

npm install less-loader -D (less載入器)

npm install sass-loader node-sass -D (sass載入器)

第二步:修改webpack.config.js:

	/**
 * webpack  組態檔
 */
const path=require('path');
module.exports={
    //偵錯時使用development開發模式
    //打包時使用production生產模式
    mode : 'development',
    entry:  path.join(__dirname,'./src/index.js'),  //__dirname表示當前目錄當前路徑
    output: {
        path: path.join(__dirname,'./dist'),
        filename:'bundle.js',
    },//出口
    devServer:{
        static: './src'
    },
    //新增內容css
    module:{    //處理css
        rules:[ //(規範)約束
            {test:/.css$/,use:['style-loader','css-loader']}//正規表示式拓展名.css
        ]
    }
}

第三步:引入CSS檔案:`

css

#box{
    width: 200px;
    height: 100px;
    background-color: greenyellow;
}

index.js中加在上方(css的路徑要填寫正確)import './css/style.css'

index.html

<h1>CSS</h1>
    <div id="box">盒子</div>

第四步:執行測試:npm run dev

成功!!!

WebPack自動打包

由於每次更新程式碼都需要手動打包,這時我們要用上自動打包

①安裝 npm install webpack-dev-server -D

②修改package.json(使得視窗自動開啟並且自動打包)

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9090"
  },

③修改webpack.config.js

devServer:{
        static: './src'
    }

④html引入bundle.js

打包後的檔案都在根目錄下

<script src="/bundle.js"></script>

④執行驗證npm run dev原理:伺服器上執行監聽,所以需要存取伺服器

直接存取即可,成功實現WebPack自動打包

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容!