快捷導航

webpack自動化打包方式詳解

更新時間：2023年02月09日 09:46:36 作者：小菜鳥學代碼··

這篇文章主要介紹了webpack自動化打包的相關(guān)知識，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

webpack自動化打包

首先下載包

npm i webpack-dev-server -D

配置

webpack.config.js

const path = require('path')//nodejs核心模塊，專門用來處理路徑問題
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //入口
    entry: './src/main.js',//相對路徑
    //出口
    output: {
        //__dirname nodejs變量，代表當前文件夾目錄，當前文件俠士config.js 目錄就是最外層的demo
        path: path.resolve(__dirname, 'dist'),//絕對路徑
        //文件名
        filename: './static/index.js',
        clean: true
    },
    //加載器
    module: {
        //規(guī)則
        // loader的配置
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',//設(shè)置資源
                generator: {
                    filename: "static/[hash][ext][query]",//打包文件名
                },
                parser: {
                    dataUrlCondition: {
                        // 小于10kb會轉(zhuǎn)換base64，優(yōu)點減少請求數(shù)量，缺點體積變大
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,//排除node_modules不處理
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]

    },
    //插件
    plugins: [
        new ESLintPlugin({
            context: path.resolve(__dirname, "src")
        }),
        new HtmlWebpackPlugin({
            //模板，以public/index.html文件創(chuàng)建新的html文件
            //心得html結(jié)構(gòu)跟原來一樣并且自動引入打包輸出的資源
            template:path.resolve(__dirname,"public/index.html")
        })],

    // 開發(fā)服務(wù)器
    devServer:{
        host:"localhost",//啟動服務(wù)器域名
        port:'3000',//端口號
        open:true,//是否自動打開瀏覽器
    },
    //模式
    mode: "development"
}

主要就是配置devServer這一塊
相當于熱啟動
此時的啟動命令是npx webpack server這個是實時啟動命令，而不是之前得npx webpack這個是打包命令

重點生產(chǎn)模式與開發(fā)模式配置

首先在最外面建個config文件夾
里面放兩套配置文件 webpack.dev.js 開發(fā)環(huán)境配置 webpack.prod.js生產(chǎn)環(huán)境配置

注意幾點首先

開發(fā)模式
入口是絕對路徑不需要修改，其余路徑都是相對路徑需要回退到根目錄下因為開發(fā)模式是不執(zhí)行打包的所以輸出路徑可以填undefined，包括下面的clean也可以不填
生產(chǎn)模式
入口是絕對路徑不需要修改，其余路徑都是相對路徑需要回退到根目錄下生產(chǎn)模式是不需要內(nèi)置瀏覽器啟動的，也是可以注釋的，模式記得改為production

開發(fā)

生產(chǎn)

然后命令太長這時候我們可以修改node啟動命令

"scripts": {
    "start":"npm run dev",
    "dev":"webpack serve --config ./config/webpack.dev.js",
    "build":"webpack --config ./config/webpack.prod.js"
  },

公司啟動命令有興趣的朋友可以了解下，大概意思就是做了一個最大內(nèi)存的限制防止文件過大打包出現(xiàn)問題

公司配置指令