【Webpack】2.四個核心概念及使用

webpack 中的四個核心概念 （Demo2 Source）

• Entry 入口
• Output 輸出
• Loaders
• Plugins 插件

  webpack 中默認的配置文件名稱是 webpack.config.js ，所以咱們須要在項目中建立以下文件結構：

.        
├── index.html            // 顯示的頁面
├── main.js              // webpack 入口 
├── webpack.config.js   //  webpack 中默認的配置文件
└── bundle.js          //  經過 webpack 命令生成的文件，無需建立

entry 入口

  入口起點（entry point）指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後。 webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

  能夠在 webpack.config.js 中 配置 entry 屬性，來指定一個入口或多個起點入口，代碼以下:

moudle.exports = {
        entry: './path/file.js'
    };

output 輸出

   output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles ，以及如何命名這些文件。你能夠經過在配置指定一個 output 字段，來配置這些過程：

const path = require('path');
    
    moudle.exports = {
        entry: './path/file.js',
        output:{
            path: path.resolve(__dirname,'dist'),
            filename: 'my-webpack.bundle.js'
        }
    }

  其中 output.path 屬性用於指定生成文件的路徑， output.filename 用於指定生成文件的名稱。

Loaders

   Loaders 讓 webpack 可以去處理那些非 JavaScript 文件（ webpack 自身只理解 JavaScript）。 loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後能夠利用 webpack 的打包能力，對它們進行處理。

  本質上， webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖能夠直接引用模塊。在更高層面上，在 webpack 的配置中 loader 有兩個目標：

1. 識別應該被對應的 loader 進行轉換的那些文件（使用 test 屬性）
2. 轉換這些文件，從而使其可以被添加到依賴圖中（而且最終添加到 bundle 中）( use 屬性)

  在開始下面的代碼以前，咱們須要安裝 style-loader 和 css-loader

$ npm install --save-dev style-loader css-loader

並在項目中建立 style.css 樣式文件:

h1{ color: red; }

  而後在 webpack.config.js 中輸入如下代碼：

const path = require('path');
    
    module.export = {
        entry: './main.js',
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules:[
                { 
                    test: /\.css$/, 
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' }
                    ]
                }
            ]
        }
    };

Plugins 插件

   Loaders 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。

  想要使用一個插件，須要 require() 它，而後把它添加到 Plugins 數組中，多數插件能夠經過選項自定義。也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的實例。

  在開始下面的代碼以前，咱們須要安裝 html-webpack-plugin 插件：

$ npm install html-webpack-plugin --save-dev

它能夠簡化HTML文件的建立，爲您的webpack包提供服務。

  而後在 webpack.config.js 中輸入如下代碼：

const HtmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path');
    
    const config = {
        entry: './main.js',
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules:[
                { 
                    test: /\.css$/, 
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' }
                    ]
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ template: './index.html' })
        ]
    };
    
    module.exports = config;

運行與配置

   最後咱們能夠直接經過 webpack 命令編譯打包,若是想要在其命令後加入參數，能夠經過配置 package.json 文件中的 scripts 屬性：

{
        scripts: {
            "build": "webpack --config webpack.config.js --progress --display-modules"
        }
    }

固然若是你想要更改默認的配置文件名稱，能夠將 --config 後面的 webpack.config.js 配置文件名改成你自定義的名稱。

  經過如下命令執行：

$ npm run build