初識Webpack

Webpack是什麼

Webpack是前端開發中經常使用的一個開源的、跨平臺的模塊打包工具。它主要用來打包JavaScript文件，可是藉助相應的插件，它也能夠轉換HTML和CSS文件，甚至是圖片等資源。根據官方文檔，其基本原理是利用模塊間的依賴關係創建依賴圖，並據今生成表示這些模塊的靜態資源。

安裝

• 使用npm
  npm install --save-dev webpack
• 使用yarn
  yarn add webpack --dev

基本配置

從版本4.0.0後，Webpack不要求自定義一個配置文件，默認的打包入口文件爲src/index，默認輸出文件爲dist/main.js。可查看GitHub上WebpackOptionsDefaulter.js源碼：
this.set("entry", "./src");
以及下文即將提到的resolve參數中用於解析模塊的文件名規則：
this.set("resolve.mainFiles", ["index"]);
由上述兩行代碼可知默認打包入口文件應該爲項目根目錄下src/index，同理，默認的輸出目錄也能夠從上述源碼中找到。
一般因爲項目的須要，能夠在根目錄下建立一個webpack.config.js，Webpack將會自動使用該配置文件。下面簡單介紹配置文件中的一些基本參數。

入口（entry）

入口起點（entry point）指示Webpack應該使用哪一個模塊做爲構建其內部依賴圖的起點。Webpack會找到依賴入口起點的模塊和庫。
默認值一般爲./src/index.js，也可使用entry屬性指定一個或多個不一樣的入口起點，以下代碼爲實際項目中使用的單入口簡寫法：

module.exports = {
    entry: resolve('app/main.js')
};

其中resolve函數封裝Node中path.join方法，以下./build/utils.js：
exports.resolve = (...arg) => path.join(__dirname, '..', ...arg)

輸出（output）

輸出（output）屬性指示Webpack輸出它所建立的bundle的位置以及文件命名規則。默認目錄爲dist,默認主文件名爲dist/main.js，固然也能夠設定output屬性值以知足本身的項目需求。以下項目實際代碼：

module.exports = {
    entry: resolve('app/main.js'),
    output: {
        //輸出文件目錄
        path: resolve('dist'),
        //靜態資源引用地址，此處爲'/'
        publicPath: config.publicPath,
        // 入口文件生產的js
        filename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js',
        // 非入口文件生產的js
        chunkFilename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js'
    }
}

其中config.noHash表示產生的資源是否須要hash值；因爲項目中客戶端和服務端存在不一樣的入口文件，此處filename和chunkFilename使用替換模板字符串輸出文件名。

加載器（loader）

loader的做用是讓Webpack能夠處理除JavaScript和JSON類型外的其餘文件，將它們轉換爲可供應用程序使用的有效模塊，並添加到依賴圖中。
須要在module.rules中定義規則，經常使用的兩個屬性爲：test和use，以下代碼：

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: [resolve('node_modules')],
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                        '@babel/preset-react',
                    ],
                    plugins: [
                        "@babel/plugin-transform-runtime",
                        ["@babel/plugin-proposal-class-properties", { "loose": false }],
                    ]
                 }
            }
        }
    ]
}

test屬性值是匹配特定文件類型的正則表達式，在上述代碼中use屬性值指定babel-loder用來轉譯js和jsx文件，排除node_modules目錄下的文件。

解析（resolve）

resolve參數定義Webpack查找模塊的規則，能夠將模塊原導入路徑映射爲新的路徑，或是根據提供的文件後綴去檢索文件。以下代碼：

resolve: {
    //設置路徑別名
    alias: {
        '@': resolve('app'),
    },
    // 文件後綴自動補全
    extensions: ['.js', '.jsx'],
}

插件（plugin）

加載器（loader）用於轉換某些類型的文件，而插件則能夠執行範圍更廣的任務。使用插件的方法也很簡單——安裝對應插件的NPM包後引入該插件，在plugins數組添加該對象，以下代碼所示：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({
        filename: config.noHash ? 'css/[name].css' : 'css/[name].[chunkhash].css',
    })
],

上述MiniCssExtractPlugin插件的功能是爲每個包含CSS的JavaScript文件建立一個獨立的CSS文件，支持按需加載CSS和SourceMap。