1. webpack中文網(wǎng)

webpack 是一個模塊打包器。webpack 的主要目標是將 JavaScript 文件打包在一起，打包后的文件用于在瀏覽器中使用，但它也能夠勝任轉換(transform)、打包(bundle)或包裹(package)任何資源(resource or asset)

1. 初始化package.json文件

   yarn init # or npm init
   

2. 安裝webpack模塊

   yarn add webpack webpack-cli --dev # or npm i webpack webpack-cli -D
   

3. 在項目根目錄下創(chuàng)建webpack.config.js配置文件

2. Webpack配置入口文件和打包后的文件

const path = require('path')

module.exports = {
  mode: 'development'
  entry: './src/main.js', // 打包的入口的文件
  output: {
    filename: 'bundle.js', // 輸出文件的名稱
    path: path.join(__dirname, 'dist') // 指定輸出文件所在的目錄，必須為絕對路徑
  }
}

工作模式：

1. （默認）生產(chǎn)模式下（production），Webpack 會自動優(yōu)化打包結果

2. 開發(fā)模式下（development），Webpack 會自動優(yōu)化打包速度，添加一些調試過程中的輔助

3. None 模式下，Webpack 就是運行最原始的打包，不做任何額外處理

3. webpack資源模塊加載（loader）

1. 加載 css

   yarn add css-loader style-loader -D
   

   module.exports = {
     ...
     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             'style-loader', // 將 css-loader 轉換后的結果通過 style 標簽追加到頁面上
             'css-loader' // 將 css 文件轉換為 js 模塊
           ]
         }
       ]
     }
   }
   

2. 加載文件資源

   yarn add file-loader -D
   

   module.exports = {
     ...
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist'),
       publicPath: 'dist/'
     },
     module: {
       rules: [
         {
           test: /.png$/,
           use: 'file-loader'
         }
       ]
     }
   }
   

3. URL加載器

    yarn add url-loader -D
   

   module.exports = {
     ...
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist'),
       publicPath: 'dist/'
     },
     module: {
       rules: [
        {
           test: /.png$/,
           use: {
             loader: 'url-loader',
             options: {
               limit: 10 * 1024 // 10 KB
             }
           }
         }
       ]
     }
   }
   
   /* 
     打包出來的結果：
       data:[<mediatype>][;base64],<data>
       協(xié)議      媒體類型和編碼      文件內容
   */
   

   小文件使用url-loader轉換為Data URls嵌入代碼中，減少請求次數(shù)

   大文件（超過10kb）單獨提取存放，通過file-loader提高加載速度

4. babel-loader：處理 ES6代碼

   yarn add babel-loader @babel/core @babel/preset-env -D
   

   rules: [
     {
       test: /.js$/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env']
         }
       }
     }
   ]
   

4. 插件機制（plugins）

1. 自動清除輸出目錄插件

   yarn add clean-webpack-plugin -D
   

   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   
   module.exports = {
     ...
     plugins: [
       new CleanWebpackPlugin()
     ]
   }
   

2. 自動生成使用打包結果的HTML文件

   yarn add html-webpack-plugin -D
   

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist'),
       // publicPath: 'dist/'
     },
     plugins: [
       new HtmlWebpackPlugin()
     ]
   }
   

   // 生成自定義的 index.html 頁面
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Webpack Plugin Sample',
       meta: {
         viewport: 'width=device-width'
       },
       template: './src/index.html' // 可定義所使用的模板
     }), 
   ]
   

   // 同時輸出多個頁面文件
   plugins: [
     // 用于生成 index.html
     new HtmlWebpackPlugin({
       title: 'Webpack Plugin Sample',
       meta: {
         viewport: 'width=device-width'
       },
       template: './src/index.html' // 可定義所使用的模板
     }),
     // 用于生成 about.html
     new HtmlWebpackPlugin({
       filename: 'about.html'
     })
   ]
   

3. 拷貝靜態(tài)資源文件到打包目錄

   yarn add copy-webpack-plugin -D
   

   const CopyWebpackPlugin = require('copy-webpack-plugin')
   
   plugins: [
     new CopyWebpackPlugin([
       // 'public/**'
       'public'
     ])
   ]