快捷導(dǎo)航

webpack自動(dòng)化打包方式詳解

更新時(shí)間：2023年02月09日 09:46:36 作者：小菜鳥學(xué)代碼··

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

webpack自動(dòng)化打包

首先下載包

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',//相對(duì)路徑
    //出口
    output: {
        //__dirname nodejs變量，代表當(dāng)前文件夾目錄，當(dāng)前文件俠士config.js 目錄就是最外層的demo
        path: path.resolve(__dirname, 'dist'),//絕對(duì)路徑
        //文件名
        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會(huì)轉(zhuǎn)換base64，優(yōu)點(diǎn)減少請(qǐng)求數(shù)量，缺點(diǎn)體積變大
                        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)跟原來一樣并且自動(dòng)引入打包輸出的資源
            template:path.resolve(__dirname,"public/index.html")
        })],

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

主要就是配置devServer這一塊
相當(dāng)于熱啟動(dòng)
此時(shí)的啟動(dòng)命令是npx webpack server這個(gè)是實(shí)時(shí)啟動(dòng)命令，而不是之前得npx webpack這個(gè)是打包命令

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

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

注意幾點(diǎn)首先

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

開發(fā)

生產(chǎn)

然后命令太長這時(shí)候我們可以修改node啟動(dòng)命令

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

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

公司配置指令