使用 webpack 對項目 靜態資源 進行打包

webpack能處理前端模塊間的引用關係並將靜態資源打包成一個文件，減少了頁面請求

初始化一個項目：

npm init -y

安裝webpack：

npm install -g webpack webpack-cli

安裝css打包用插件：

PS：Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。

Loader 可以理解爲是模塊和資源的轉換器。

所以需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

npm install --save-dev style-loader css-loader 

有一個css文件放置在css目錄下：

body{
    background-color: blue;
}

 有三個js文件放置在src目錄下：

common.js：

export function print(message){
    document.write(message);
}

utils.js：

export function sum(a,b){
    return a + b;
}

main.js 引用common和utils模塊以及css文件：

const common = require('./common.js');
const utils = require('./utils.js');

require('../css/style.css');

common.print("Hello Message," + utils.sum(2,4));

創建 webpack.config.js文件：

 

//nodejs 內置模塊
const path = require('path');
module.exports = {
    entry: './src/main.js', //入口文件設置
    output: {
        path: path.resolve(__dirname,'./rs'), //輸出路徑
        filename: 'rs.js'
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包規則應用到以css結尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

使用webpack進行打包（設置mode可以免去提示警告‘ webpack --mode=development/production ’）：

webpack --mode=development

 

新建index.html文件引入 rs.js

 

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

使用VSCode live server 插件運行：

 

結果如下：

PS：VSCode live server插件安裝方法如下：