NodeJs使用webpack打包項目的方法詳解

Posted on by

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自動打包

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容! 

推薦閱讀：