【webpack4 系列之三】

基础

• entry: 配置模块的入口

  • webpack寻找文件的时候会以context为基础，context默认的是执行webpack的路径，比如我们项目就是默认根目录，当然也可以采取命令行去配置，比如webpack --context

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

    我们现在看到的entry里的路径也是相对于这个context的路径的，这个选项会影响后续配置的文件的路径

  • entry可以配成三种方式string, array, object,比如我们现在是一个页面就是‘./src/index.js’,多个页面的入口就是['./src/firstpage.js','./src/secondpage.js']

    • chunk: webpack会为每个生成的chunk起名字，如果上面entry配了string/array,则只有一个chunk,如果配成object,那么chunk会有多个，每个的名字就是object里的key的名字:

  • 配置动态entry:

    这个就是如果你有多个页面，要做多个入口，可以写成动态的，比如同步的直接返回一个object，异步方式就返回一个promise

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

• output:配置如何输出最终需要的代码

  • filename:如果只有一个，就是字符串，比如我们的bundle.js,如果输出多个chunk,就用通配符[name].js,

    可以这样[id]-[name]-[hash]-[chunkhash].js,这几个都是他的内部变量，表示chunk的唯一标示，名称，唯一标示的hash,chunk内容的hash

  • chunkFilename:比如commonchunkplugin输出的文件名，内置变量和上面一致

  • path：打包文件的输出目录

  • publicpath：这个就是静态资源如果放cdn上，需要去配的，可以自己写个域名放上去看看效果就知道了

  • crossOriginLoading：输出的时候如果需要异步加载一些资源，这个就是配置这些资源的获取，一般是通过jsonp来做的，会往html里插一个