6個必須掌握的基礎配置 - [webpack第一篇]

時間 2019-11-06

標籤必須掌握基礎配置 webpack 一篇简体版

原文原文鏈接

webpack實戰系列全目錄

webpack6個常見的基礎配置知識點
webpack 12個常見的實際場景
webpack15個常見的優化策略【敬請期待】
webpack從0打造兼容ie8的腳手架【敬請期待】
webpack面試全總結【敬請期待】

前言

最近這段時間，一直在研究webpack相關的一些知識點，同時，公司正在作兼容ie8的官網，因此藉此，把webpack相關知識點進行總結，同時最終目的是使用webpack4.x從0打造一個兼容ie8的腳手架，這樣之後若是有這樣的兼容瀏覽器的需求，你們就能夠直接像使用vue-cli等腳手架同樣，直接安裝就能夠生成模版文件（雖然可能都2019了，但還有兼容ie8的需求，心裏一萬個....）css

本節，咱們說一下webpack最基礎的6個配置項：vue

entry入口配置

output輸出配置

module

resolve

plugin

devServer

三種易混淆知識點

一. entry入口配置

首先，要你們清楚一點：webpack是採用模塊化的思想，全部的文件或者配置都是一個個的模塊，同時全部模塊聯繫在一塊兒，能夠理解爲就是一個簡單的樹狀結構，那麼最頂層的入口是什麼呢？答案就是entry，node

因此，webpack在執行構建的時候，第一步就是找到入口，從入口開始，尋找，遍歷，遞歸解析出全部入口依賴的模塊。react

實例代碼以下：jquery

module.exports = {
    entry: {
        app: './src/main.js'
    },
    //還有output,module等其餘配置項
}
複製代碼

咱們來講明一下entry的類型： webpack

固然，除了上面三種靜態類型，咱們還能夠動態配置entry: 即採用箭頭函數動態返回。

此處，關於entry, 咱們只須要記住，它有多種配置類型，並且能夠動態配置，能夠爲入口設置別名，具體用法在實際開發中再查便可。web

二. output輸出配置

前面說到entry能夠是一個字符串，數組，也能夠是對象，可是output只是一個對象，裏面包含一系列輸出配置項。面試

三. module

module 主要用於配置處理模塊的規則，主要有三點：正則表達式

1. 配置loader

咱們經過代碼來講明：vue-cli

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            //use能夠是普通字符串數組，也能夠是對象數組
            use: ['babel-loader?cacheDirectory'],
            use: [
                {
                    loader: 'babel-laoder',
                    options: {
                        cacheDirectory:true,//
                    },
                    enforce: 'post'
                }
            ]
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            exclude: path.resolve(__dirname, 'node_modules')
        }
        {
            //對非文本文件採用 file-loader 加載
            test: /\ . (gif Ipng Ijpe?g Ieot Iwoff Ittf Isvg Ipdf) $/, use: [’ file-loader ’],   
        }，
        //配置更多的其餘loader
    ]
}
複製代碼

屬性說明：

test/include/exclude：表示匹配該loader的文件或者文件範圍
use：表示使用什麼loader，它能夠是一個字符串，也能夠是字符串數組，也能夠是對象數組，那多個loader時，執行順序是從右向左，固然，也可使用enforce去強制讓某個loader的執行順序放到最前面或者最後面。
cacheDirectory : 表示傳給 babel-loader 的參數，用於緩存 babel 的編譯結果，加快編譯的速度。
enforce: post表示將該loader的執行順序放到最前面，pre則相反。
多個loader時的處理順序：爲從後到前，即先交給 sass-loader 處理，再將結果交給 css-loader,最後交給 style-loader

2. 配置noParse

noParse能夠用於讓webpack忽略哪些沒有采用模塊化的文件，不對這些文件進行編譯處理，這樣作能夠提升構建性能，由於例如一些庫：如jquey自己是沒有采用模塊化標註的，讓webpack去解析這些文件即耗時，也沒什麼意義。

module: {
    rules: [],
    noParse: /jquery|lodash/,
    noParse: (content) => {
        return /jquery/.test(content);
    }
}
複製代碼

說明：

noParse的值能夠是正則表達式，也能夠是一個函數
被忽略的文件裏不該該包含 import、 require、 define 等模塊化語句，不然會致使在構建出的代碼中包含沒法在瀏覽器環境下執行的模塊化語句。

3. 配置parser

由於 Webpack 是以模塊化的 JavaScript 文件爲入口的，因此內置了對模塊化 JavaScript 的解析功能，支持 AMO, CornmonJS、 SystemJS、 ES6。 parser 屬性能夠更細粒度地配置哪些模塊語法被解析、哪些不被解析。同 noParse 配置項的區別在於， parser 能夠精確到語法層面，而 noParse 只能控制哪些文件不被解析。

module: {
    rules: [
        test: /\.js$/，
        use: [ ’ babel-loader ’],
        parse: [
            amd: false， //禁用AMD
            commonjs : false , //禁用 CommonJS
            system : false, //禁用 SystemJS
            harmony: false， //禁用 ES6 import/export
            requireinclude: false, // 禁用require.include
            requireEnsure: false, // 禁用require.ensure
            requireContext: false, // 禁用require.context
            browserify: false, //禁用 browserify requireJs : false, //禁用 requirejs: false, //禁用requirejs
        ]
    ]
}
複製代碼

說明：

parse是與noParse同級的屬性，固然也能夠嵌套到rules，表示針對與某個loader應用該屬性的規則。
目前只要明白parse屬性，是用於聲明哪些模塊語法被解析，哪些不被解析便可

四. resolve

resolve配置webpack如何去尋找模塊所對應的文件, 咱們平時經過import導入的模塊，resolve能夠告訴webpack如何去解析導入的模塊，

1. alias: 配置路徑別名

resolve: {
    alias: {
        'components': './src/components/',
        'react$':  '/path/to/react.js'
    }
}
複製代碼

配置之後，咱們就能夠經過：

import Button from 'components/button'，實際上就是 import Button from ' ./src/components/button ' ，
react$只會命中以 react 結尾的導入語句，即只會將 import ’ react ’關鍵字替換成 import ’ / path/to/react .min.j s’ 。

2. extensions：用於配置模塊文件的後綴列表。

咱們可能在導入模塊的時候，都遇到這種狀況，例如 require (’. /data ’); 此時，咱們發現導入的文件實際上是沒有後綴名的，爲何不用寫後綴名呢？緣由就是咱們配置了resolve-extensions 後綴列表。默認是:

resolve : {
    extension: ['.js', '.json']
}
複製代碼

也就是說，當遇到 require (’. /data ’)這樣的導入語句時， Webpack會先尋找./ data . js 文件，若是該文件不存在，就去尋找 . /data .json 文件，若是還是找不到，就報錯。

假如咱們想讓 Webpack優先使用目錄下的 Typescript文件，則能夠這樣配置:

resolve : {
    extension: [’.ts’,’.j5 ’,’.json’]
}
複製代碼

3. modules

resolve.modules 配置 Webpack 去哪些目錄下尋找第三方模塊，默認只會去 node modules 目錄下尋找。有時咱們的項目裏會有一些模塊被其餘模塊大量依賴和導入，因爲其餘模塊的位置不定，針對不一樣的文件都要計算被導入的模塊文件的相對路徑，這個路徑有時會很長，

例如：就像import’../../../components/button’，這時能夠利用modules 配置項優化。假如那些被大量導入的模塊都在./ src/components 目錄下，則將 modules配置成、

resolve: {
    modules : [’./ src/cornponents ’,' node modules ’] } 複製代碼

此時，咱們就能夠簡單地經過import ’button ’ 導入。

注意：請分清modules和alias的區別，modules是用來配置一些公共模塊，這些公共模塊和nodemodules相似，配置之後，咱們就能夠直接引用模塊，前面不須要再加路徑，而alias做用是配置路徑別名，目的是可讓路徑簡化。二者是不同的。

除此以外，還有

descriptionFiles：配置描述第三方模塊的文件名稱：默認是package.json
enforceExtension：配置後綴名是否必須加上

五. plugin

plugins 其實包括webpack自己自帶的插件，也有開源的其餘插件，均可以使用，它的做用就是解決loader以外的其餘任何相關構建的事情。

const CommonsChunkPlugin =require ('webpack/lib/optimize/ CommonsChunkPlugin') ;
modules: {
    plugins: [
        new CommonsChunkPlugin ((
            name :’ coπunon ’ ，
            chunks: [’a’,’b’] }) ,
        }),
        //也能夠配置其餘插件
    ]
}
複製代碼

至此，咱們須要明白：