基础

• 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里插一个<script>标签

  • libraryTarget & library：配置以什么方式导出库和导出库的名称

  • libraryExport： 如果上面导出方式是commons/commonjs2的时候，你可以在这里导出你想导出的字模块

• module:配置处理模块的规则

  • rules配置模块的读取和解析规则，就是配置loader的时候，一般是一个数组，然后每一部分配置怎么处理一个类型的文件，每一部分包括三个方面

    • 匹配到需要处理的文件，包括test(支持数组), include, exclude

    • 使用特定的loader来处理这些匹配到的文件babel-loader, css-loader...loader如果有多个参数需要传入，可以使用object来传递，经常看到的是option:{xxxx}这样的

    • 执行loader的顺序可以调整到最开始或者最后执行，通过enforce来配置，设为pre/post

  • noParse: 这个就是用来让webpack忽略一些文件，比如jquery/chartjs,举个例子：

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

  • parser: 支持amd, commonjs,systemjs,es6,举个例子

    
    {
    
        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如何寻找模块所对应的文件

  • alias: 就是别名，比如你import的时候，它会替换成真正的位置

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

    上面代码就会在你import xxx from "components/xxx"的时候帮你替换成“./src/components/xxx”

  • mainFields: 有的模块提供不同环境的代码，这个字段可以指定优先使用哪个版本

  • extentions: 让webpack在寻找文件的时候，找这样扩展名的文件，你导入文件的时候不指定后缀名的话，会去看这个选项的配置，然后去寻找

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

  • modules: resolve.modules配置web pack去哪些目录寻找第三方模块，默认指定node_modules,一般我们应用会这样配

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

    这样配后，你以前可能需要import xxx from ../../../components/xxx 就可以直接import xxx from xxx;简洁了许多

  • enforeExtention: 如果配成true,那么你import 语句就必须加后缀名，否则会找不到

• plugins:配置扩展插件

  • 我们项目里用到了一些，你也可以看到，其实引入都是大同小异，主要是要搞清楚这里面的具体的配置项

• dev-server:配置dev-server

  • hot: 我们在配置hot module replacement的时候会配的

  • inline： 一般使用这个模式，打开之后，webpack通过代理客户端控制模块替换和刷新，如果关闭，那它文件变化后，会通过iframe的方式去运行，要到localhost:8080/webpack-dev-server看效果

  • 还有一些配置项，参考文档，比如historyApiFallback, contentBase ,headers ,host, port, allowHosts ,disableHostCheck, https,clientLogLevel,compress,open这些都可以去看看，经常涉及到

• others:其他配置项，配置文件不止可以返回object,也可以返回其他形式

  • target: 针对不同的环境，比如web, node,async-node,webworker,electron-main,electron-renderer

  • Devtool: 配置webpack如何生成sourcemap

  • watch: 配置文件更新监听

  • external：有些第三方库，这些不需要webpack打包，比如jquery

  • ResolveLoader: 告诉webpack如何发现loader