基礎(chǔ)

• entry: 配置模塊的入口

  • webpack尋找文件的時(shí)候會(huì)以context為基礎(chǔ)，context默認(rèn)的是執(zhí)行webpack的路徑，比如我們項(xiàng)目就是默認(rèn)根目錄，當(dāng)然也可以采取命令行去配置，比如webpack --context

    
    module.exports={
    
        context: path.resolve(__dirnaame,'app')
    
    }
    
    

    我們現(xiàn)在看到的entry里的路徑也是相對(duì)于這個(gè)context的路徑的，這個(gè)選項(xiàng)會(huì)影響后續(xù)配置的文件的路徑

  • entry可以配成三種方式string, array, object,比如我們現(xiàn)在是一個(gè)頁(yè)面就是‘./src/index.js’,多個(gè)頁(yè)面的入口就是['./src/firstpage.js','./src/secondpage.js']

    • chunk: webpack會(huì)為每個(gè)生成的chunk起名字，如果上面entry配了string/array,則只有一個(gè)chunk,如果配成object,那么chunk會(huì)有多個(gè)，每個(gè)的名字就是object里的key的名字:

  • 配置動(dòng)態(tài)entry:

    這個(gè)就是如果你有多個(gè)頁(yè)面，要做多個(gè)入口，可以寫(xiě)成動(dòng)態(tài)的，比如同步的直接返回一個(gè)object，異步方式就返回一個(gè)promise

    
    //同步
    
    entry: ()=> {
    
        return {
    
            first: './src/firstpage',
    
            second: './src/sencordpage'
    
        }
    
    }
    
    //異步
    
    entry: ()=>{
    
        return new Promise((resolve)=>{
    
            resolve({
    
                first:'./src/firstpage',
    
                second:'./src/secondpage'
    
            })
    
        })
    
    }
    
    

• output:配置如何輸出最終需要的代碼

  • filename:如果只有一個(gè)，就是字符串，比如我們的bundle.js,如果輸出多個(gè)chunk,就用通配符[name].js,

    可以這樣[id]-[name]-[hash]-[chunkhash].js,這幾個(gè)都是他的內(nèi)部變量，表示chunk的唯一標(biāo)示，名稱，唯一標(biāo)示的hash,chunk內(nèi)容的hash

  • chunkFilename:比如commonchunkplugin輸出的文件名，內(nèi)置變量和上面一致

  • path：打包文件的輸出目錄

  • publicpath：這個(gè)就是靜態(tài)資源如果放cdn上，需要去配的，可以自己寫(xiě)個(gè)域名放上去看看效果就知道了

  • crossOriginLoading：輸出的時(shí)候如果需要異步加載一些資源，這個(gè)就是配置這些資源的獲取，一般是通過(guò)jsonp來(lái)做的，會(huì)往html里插一個(gè)<script>標(biāo)簽

  • libraryTarget & library：配置以什么方式導(dǎo)出庫(kù)和導(dǎo)出庫(kù)的名稱

  • libraryExport： 如果上面導(dǎo)出方式是commons/commonjs2的時(shí)候，你可以在這里導(dǎo)出你想導(dǎo)出的字模塊

• module:配置處理模塊的規(guī)則

  • rules配置模塊的讀取和解析規(guī)則，就是配置loader的時(shí)候，一般是一個(gè)數(shù)組，然后每一部分配置怎么處理一個(gè)類型的文件，每一部分包括三個(gè)方面

    • 匹配到需要處理的文件，包括test(支持?jǐn)?shù)組), include, exclude

    • 使用特定的loader來(lái)處理這些匹配到的文件babel-loader, css-loader...loader如果有多個(gè)參數(shù)需要傳入，可以使用object來(lái)傳遞，經(jīng)常看到的是option:{xxxx}這樣的

    • 執(zhí)行l(wèi)oader的順序可以調(diào)整到最開(kāi)始或者最后執(zhí)行，通過(guò)enforce來(lái)配置，設(shè)為pre/post

  • noParse: 這個(gè)就是用來(lái)讓webpack忽略一些文件，比如jquery/chartjs,舉個(gè)例子：

    
    noParse:|jquery/chartjs/
    
    // 或者是函數(shù)形式
    
    noParse: (content) =>{
    
    return /jquery/chartjs/.test(content)
    
    }
    
    

  • parser: 支持amd, commonjs,systemjs,es6,舉個(gè)例子

    
    {
    
        moudle:{
    
            rules:{
    
                test: /\.js$/,
    
                use:['babel:loader'],
    
                parser:[
    
                    amd: false,
    
                    commonjs: false,
    
                    system:false,
    
                    harmony:false,
    
                    requireInclude: false,//禁用require.include
    
                    requireEnsure: false,//禁用require.ensure
    
                    requireContext: false,//禁用require.context
    
                    browserify: false,
    
                    requireJs:false
    
                ]
    
    
    
            }
    
        }
    
    }
    
    

• resolve: webpack如何尋找模塊所對(duì)應(yīng)的文件

  • alias: 就是別名，比如你import的時(shí)候，它會(huì)替換成真正的位置

    
    resolve:{
    
        alias:{
    
            components:"./src/components"
    
        }
    
    }
    
    

    上面代碼就會(huì)在你import xxx from "components/xxx"的時(shí)候幫你替換成“./src/components/xxx”

  • mainFields: 有的模塊提供不同環(huán)境的代碼，這個(gè)字段可以指定優(yōu)先使用哪個(gè)版本

  • extentions: 讓webpack在尋找文件的時(shí)候，找這樣擴(kuò)展名的文件，你導(dǎo)入文件的時(shí)候不指定后綴名的話，會(huì)去看這個(gè)選項(xiàng)的配置，然后去尋找

    
    // 先去找ts文件，然后js,然后json文件
    
    extentsions:['.ts','.js','.json']
    
    

  • modules: resolve.modules配置web pack去哪些目錄尋找第三方模塊，默認(rèn)指定node_modules,一般我們應(yīng)用會(huì)這樣配

    
    modules:['./src/components','node_modules']
    
    

    這樣配后，你以前可能需要import xxx from ../../../components/xxx 就可以直接import xxx from xxx;簡(jiǎn)潔了許多

  • enforeExtention: 如果配成true,那么你import 語(yǔ)句就必須加后綴名，否則會(huì)找不到

• plugins:配置擴(kuò)展插件

  • 我們項(xiàng)目里用到了一些，你也可以看到，其實(shí)引入都是大同小異，主要是要搞清楚這里面的具體的配置項(xiàng)

• dev-server:配置dev-server

  • hot: 我們?cè)谂渲胔ot module replacement的時(shí)候會(huì)配的

  • inline： 一般使用這個(gè)模式，打開(kāi)之后，webpack通過(guò)代理客戶端控制模塊替換和刷新，如果關(guān)閉，那它文件變化后，會(huì)通過(guò)iframe的方式去運(yùn)行，要到localhost:8080/webpack-dev-server看效果

  • 還有一些配置項(xiàng)，參考文檔，比如historyApiFallback, contentBase ,headers ,host, port, allowHosts ,disableHostCheck, https,clientLogLevel,compress,open這些都可以去看看，經(jīng)常涉及到

• others:其他配置項(xiàng)，配置文件不止可以返回object,也可以返回其他形式

  • target: 針對(duì)不同的環(huán)境，比如web, node,async-node,webworker,electron-main,electron-renderer

  • Devtool: 配置webpack如何生成sourcemap

  • watch: 配置文件更新監(jiān)聽(tīng)

  • external：有些第三方庫(kù)，這些不需要webpack打包，比如jquery

  • ResolveLoader: 告訴webpack如何發(fā)現(xiàn)loader