1. 為什么需要學習（了解）webpack
   webpack是前端工程化的基石，webpack又是基于node進行文件打包bundle，所以作為前端起手學習node服務端開發(fā)，同時學習webpack是很有必要的。
   隨著vite的出現(xiàn)，vue這一脈可能也許不再需要學習webpack了，但是需要知道的是，打包一定是前端工程化繞不開的一個概念，如果是一個足夠了解webpack的開發(fā)者，日后再學習任何一款前端構建工具都將事半功倍。
   但是webpack本身卻是是復雜的。真要深入學習付出是必不可少的。
   經過基礎學習之后能夠具備對問題順藤摸瓜的能力，這是基礎要求。

2. webpack概念

   本質上，webpack 是一個用于現(xiàn)代 JavaScript 應用程序的 靜態(tài)模塊打包工具。當 webpack 處理應用程序時，它會在內部從一個或多個入口點構建一個 依賴圖(dependency graph)，然后將你項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態(tài)資源，用于展示你的內容。

3. webpack核心配置項

   • webpack.common.js 基本配置項 入口(entry)， 出口(output)， 插件(plugins)，模塊打包(loader)

     const path = require('path');
     const HtmlWebpackPlugin = require('html-webpack-plugin');
     const webpack = require('webpack');
     const MyPlugin = require('./myPlugin');
     
     module.exports = {
       // 入口 可多個
       entry: './src/main.js',
       // 出口 可多個
       output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'build.js'
       },
       // 插件
       plugins: [
         new webpack.DefinePlugin({
           VERSION: JSON.stringify('1.0.0')
         }),
         new HtmlWebpackPlugin({ template: './public/index.html', title: 'webpack app' }),
         new MyPlugin()
       ],
       // 模塊loader
       module: {
         rules: [
           {
             test: /\.css$/i,
             use: ['style-loader', 'css-loader', './myLoader']
           }
         ]
       }
     };
     
     

   • webpack.dev.js 開發(fā)環(huán)境配置項 代理服務器(devServer) 調試工具(devtool)

     const { merge } = require('webpack-merge');
     const path = require('path');
     const common = require('./webpack.common.js');
     const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
     
     module.exports = merge(common, {
       plugins: [
         new BundleAnalyzerPlugin({
           analyzerPort: 8888,
           openAnalyzer: false
         })
       ],
       // 模式
       mode: 'development',
       // devServer
       devServer: {
         static: {
           // 告訴服務器從哪里提供內容。只有在你希望提供靜態(tài)文件時才需要這樣做。static.publicPath 將會被用來決定應該從哪里提供 bundle，并具有優(yōu)先級。
           publicPath: '/',
           directory: path.join(__dirname, 'public')
         },
         host: 'localhost',
         port: 8080,
         open: true
       },
       // source-map 會在webpack打包生成的文件模塊的末端 加上 //# sourceURL=
       // 映射source-map
       devtool: 'inline-source-map'
     });
     

   • webpack.prod.js 生產環(huán)境配置項 externals(打包剔除優(yōu)化)

     const { merge } = require('webpack-merge');
     const common = require('./webpack.common.js');
     const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
     const { CleanWebpackPlugin } = require('clean-webpack-plugin');
     
     module.exports = merge(common, {
       plugins: [
         new CleanWebpackPlugin(),
         new BundleAnalyzerPlugin({
           analyzerPort: 1055,
           openAnalyzer: false
         })
       ],
       // 模式
       mode: 'production',
       // externals key: value
       // key和 import jQ from 'jquery'; 中的 'jquery' 一樣
       // value 用于替換 import jQ from 'jquery' 中的jQ
       // 所以 value 必須和cdn引用暴露的window變量一樣
       externals: {
         jquery: 'jQuery'
       }
     });
     

4. main.js 順著main.js我們往下看

   import './style.css';
   
   import jQ from 'jquery';
   
   const str = 'hello webpack';
   // 再webpack中
   // 告知 webpack 將 process.env.NODE_ENV 設置為一個給定字符串。
   // 如果 optimization.nodeEnv 不是 false，則會使用 DefinePlugin，optimization.nodeEnv 默認值取決于 mode，
   // 如果為 falsy 值，則會回退到 "production"。
   console.log(process.env.NODE_ENV);
   //打包常量直接替換為 console.log('hello webpack');
   console.log(str);
   //生產環(huán)境用cdn
   console.log(jQ);
   //webpack.DefinePlugin
   console.log(VERSION);
   
   // 開啟 devtool: 'inline-source-map' 方便調試
   // console.log(VERSION.t.t);
   

5. 實現(xiàn)js文件中引入css
   因為在webpack.common.js中配置了css模塊的loader，這樣webpack就能知道怎么去處理對應的文件，以及處理之后給js暴露一個什么樣的對象

6. 生產環(huán)境不將jquery打包，改用cdn引入
   因為在webpack.prod.js中配置了打包剔除優(yōu)化（externals），結合使用插件HtmlWebpackPlugin 結合 ejs語法, 在html模板中實現(xiàn)生產環(huán)境使用cdn引入jquery，當然此處還涉及了如何判斷開發(fā)環(huán)境和生產環(huán)境，用到了一個node進程對象變量process.env.NODE_ENV 默認情況取決于webpack配置項mode的值
   html模板如下

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title><%= htmlWebpackPlugin.options.title %></title>
       <% if (process.env.NODE_ENV === 'production' ) { %>
       <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
       <% } %>
     </head>
     <body>
       <h1>hello webpack server</h1>
     </body>
   </html>
   

7. 使用DefinePlugin 在 編譯時 將代碼中的變量替換為其他值或表達式
   這里你也可以用來區(qū)分開發(fā)環(huán)境和生產環(huán)境而不是使用process.env.NODE_ENV , 在main.js中我們輸出了一個被定義為字符串1.0.0的VERSION，console.log(VERSION); ==> console.log('1.0.0');

8. 實現(xiàn)MyLoader MyPlugin 在cmd控制臺打印MyLoader… MyPlugin… 自定義規(guī)則需要結合文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-795618.html

   module.exports = function (source) {
     const content = source;
     console.log('MyLoader...');
     return content;
   };
   //loader 從右到左（或從下到上）地取值(evaluate)/執(zhí)行(execute)
   //盲猜源碼用了pop()
   

   module.exports = class MyPlugin {
     apply(compiler) {
       // 找到合適的事件鉤子，實現(xiàn)自己的插件功能
       compiler.hooks.emit.tap('MyPlugin', () => {
         // compilation: 當前打包構建流程的上下文
         console.log('MyPlugin...');
       });
     }
   };
   

到了這里，關于node 第二十一天 webpack 初見的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！