簡單運用理解webpack

流程圖：

一 定義：js模塊打包器
把所有的依賴檔案生成一個圖，打包成檔案

如何安裝：npm init -y 初始化專案

npm i webpack-cil -D 安裝

組態檔：在創建的檔案夾根目錄創建一個 webpack.config.js

module.exports = {
    //入口
    entry:{
	
	},
    //出口
    output: {
      
    },
    plugins: [
        // 實體化vue插件
    
    ],

配置一個 module.exports={ }

二 webpack的核心理念：

1.入口(entry）

2.出口(output)

3.plugin

4.loader 加載器

5.模式 mode

6.本地服務器 dev Server

三 webpack插件的運用：

//匯入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//匯入css抽出壓縮插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//匯入css壓縮插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//匯入js壓縮插件
const TerserWebpackPlugin = require("terser-webpack-plugin");
//匯入path
const path = require("path");
//匯入拷貝插件
const CopyWebpackPlugin = require("copy-webpack-plugin");
//匯入清空插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const VueLoaderPlugin = require("vue-loader/lib/plugin");

先匯入所需插件的內容

plugins: [
        // 實體化vue插件
        new VueLoaderPlugin(),
        //清空
        new CleanWebpackPlugin(),
        //實體化
        new HtmlWebpackPlugin({
            //指定模板
			filename:'index.html',
            template: "./public/index.html",
			chunks:['vue']
        }),
		new HtmlWebpackPlugin({
		    //指定模板 
			filename:'base.html',
			template:'./public/base.html',
			chunks:['base']
		}),
        new MiniCssExtractPlugin({
            filename: "style-[contenthash:7].css",
			
			
        }),
        new CopyWebpackPlugin({
            // 設定靜態目錄（拷貝檔案到另外一個檔案夾）
            patterns: [
                // { from: __dirname+'/public', to: __dirname+'/dist' },
                //from 從， to 到 __dirname 當前目錄
                { from: __dirname + "/src/static", to: __dirname + "/dist/static" },
            ],
        }),
    ],

然后在plugins里實體化模板

四 webpack里loader用法

1.css-loader 處理css檔案

2.style-loader把css插入到header

3.less-loader 處理.less

4.MiniCssExtractPlugin.loader壓縮抽出css-loader

5.file-loader處理檔案，圖片

6.url-loader 當檔案比較小的時候轉成base64(減少-http請求)

使用方法：

 module: {
        rules: [{
                //vue 決議
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        //開發環境使用style-loader打包
                        css: ["style-loader", "css-loader"],
                        less: ["style-loader", "css-loader", "less-loader"],
                    },
                },
            },
            {
                //loader 是有順序的，從右向左
                test: /\.css$/,
                use: [ /*"style-loader"*/ MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
            },
            {
                test: /\.(jpg|jpeg|png|gif|webp|ico)$/,
                use: [{
                    loader: "url-loader",
                    options: { limit: 10000, name: "images/[name].[ext]" },
                }, ],
            },
        ],
    },

在model 進行決議

五 webpack如何進行命令script

   "scripts": {
        "build": "webpack",
        "serve": "webpack serve",
        "test": "echo \"Error: no test specified\" && exit 1"
    },

在根目錄下package.json 進行配置

然后在 webpack.config.js 里配置

???????

  mode: PROCESS.ENV.no, //產品模式 development
    devServer: {
        open: true, //打開瀏覽器
        host: "localhost", //本地域名
        port: 8080, //埠號
        hot: true, //熱加載
    },

這樣就能進行基本的打包和運行