webpack學習筆記(一) 核心概念

這篇文章咱們先來簡單看看 webpack 中幾個的核心概念，並粗略學習一下配置文件的寫法

一、mode

在 webpack 中有兩種常見的模式，一種是 development（開發模式），一種是 production（生產模式）

兩種模式下都有對應的 webpack 內置優化

• 在 development 模式下，process.env.NODE_ENV 的值將被設置爲 development

// webpack.development.config.js

module.exports = {
    mode: 'development'
}

• 在 production 模式下，process.env.NODE_ENV 的值將被設置爲 production

// webpack.production.config.js

module.exports = {
    mode: 'production'
}

二、entry

entry 是 webpack 構建模塊依賴圖的起點

webpack 會遞歸地尋找這個入口文件依賴的全部模塊，並根據這些依賴關係構建出一個模塊依賴圖

// webpack.config.js
// 單個入口文件的簡寫語法

module.exports = {
    entry: './src/index.js' // entry 屬性指定入口文件路徑
};

咱們還能指定多個入口文件（這是一種可拓展的方式）

對於每一個入口文件，webpack 都會構建一個模塊依賴圖，這些依賴圖是彼此分離、相互獨立的

// webpack.config.js
// 多個入口文件的對象語法

module.exports = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
};

三、output

output 是 webpack 打包以後輸出的文件

當 webpack 對一個入口文件構建好模塊依賴圖後，它會將全部模塊打包成一個或多個文件輸出

// webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: { // output 屬性指定打包以後的文件放在什麼位置
        // filename 屬性指定輸出文件的文件名稱
        filename: 'bundle.js',
        // path 屬性指定輸出目錄的絕對路徑
        path: '/dist'
    }
};

對於多個入口文件狀況，output 也只能指定一個輸出配置

此時應該使用 佔位符 來確保每一個文件具備惟一的名稱

// webpack.config.js

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/vendors.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

四、loader

loader 用於對模塊的源代碼進行轉換

由於 webpack 只能理解 JavaScript，因此須要 loader 將其它類型的文件轉化爲 webpack 可以處理的有效模塊

不一樣的 loader 完成不一樣的任務，下面的例子指定使用 style-loader 和 css-loader 處理 CSS 文件

// webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: '/dist'
    },
    module: {
        // rules 屬性用於定義處理規則
        // 它是一個數組，其中的每個項是一個對象，定義一條處理規則
        rules: [
            {
                // test 屬性用於標識應該處理哪些文件
                // 它能夠是一個正則表達式
                test: /\.css$/,
                // use 屬性用於指定應該使用哪些 loader
                // 它是一個數組，其中的每個項是一個對象，指定一個 loader
                use: [
                    {
                        // 須要安裝 style-loader
                        // npm install --save-dev style-loader
                        loader: 'style-loader'
                    },
                    {
                        // 須要安裝 css-loader
                        // npm install --save-dev css-loader
                        loader: 'css-loader',
                        options: { // options 屬性用於傳入額外的配置
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
}

五、plugin

plugin 用於處理一些拓展任務，從打包優化和壓縮，一直到從新定義環境中的變量

// webpack.config.js

// 內置插件
const webpack = require('webpack')
// 外部插件，須要經過 npm 安裝
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        // 因爲插件能夠攜帶參數，因此咱們須要傳入一個 new 實例
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}

【 閱讀更多 webpack 系列文章，請看 webpack學習筆記 】