深刻淺出webpack學習(10)--總體結構配置

webpack的總體配置結構

以前說過每一個配置項的具體含義，可是沒有描述他們所處的位置和數據結構，下面統一描述下：

const path = require('path')

module.exports = {
    //entry表示入口， webpack執行構建的第一步將從entry開始，可抽象成輸入。
    //類型能夠是string | object | array
    entry: './app/entry', //只有1個入口，入口只有一個文件
    entry: ['./app/entry1', './app/entry2'], //只有一個入口，入口有兩個文件
    entry: {    //有2個入口
        a: './app/entry-a',
        b: ['./app/entry-b1', './app/entry-b2']
    }，
    
    //如何輸出結果： 在webpack通過一系列處理後，如何輸出最終想要的代碼。
    output: {
        //輸出文件存放的目錄， 必須是string類型的絕對路徑
        path: path.join(__dirname, 'dist')
        //輸出文件的名稱
        filename: 'bundle.js', //完整的名稱
        filename: '[name].js', //當配置多個entry時，經過名稱模板爲不一樣的entry生成不一樣的文件名稱
        filename: '[chunkhash].js', //根據文件內容hash值生成文件名稱，用於瀏覽器長時間緩存
        
        //發佈到線上的全部資源的URL前綴，string類型
        publicPath: '/assets/', //放到指定目錄下
        publicPath: '', //放到根目錄下
        publicPath: 'https://cdn.example.com/'放到cdn上去
        
        //導出庫的名稱， string類型
        //不填它時， 默認輸出格式是匿名的當即執行函數
        library: 'MyLibrary',
        
        //導出庫的類型，枚舉類型，默認是var
        //能夠是umd | umd2 | commonjs2 | commonjs | amd | this | var。。。
        libraryTarget: 'umd'
        
        //是否包含有用的文件路徑信息到生成的代碼裏去，boolean類型
        pathinfo: true,
        
        //附加Chunk的文件名稱
        chunkFilename: '[id].js',
        chunkFilename: '[chunkhash].js'
        
        //JSONP異步加載資源時的回調函數名稱， 須要和服務端搭配使用
        jsonpFunction: 'myWebpackJsonp'
        
        //生成的Source Map文件名稱
        sourceMapFilename: '[file].map',
        
        //瀏覽器開發者工具裏顯示的源碼模塊名稱
        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
        
        //異步加載跨域資源時使用的方式
        crossOriginLoading: 'use-credentials',
        crossOriginLoading: 'anonymous',
        crossOriginLoading: false,
    },
    
    //配置模塊相關
    module: {
        //配置loader
        rules: [
            {
                test: /\.jsx?$/, //正則匹配命中要使用loader的文件
                include: [    //只會命中這裏面的文件
                    path.resolve(__dirname, 'app')
                ],
                exclude: [ //忽略這裏的文件
                    path.resolve(__dirname, 'app/demo-files')
                ],
                use: [    //使用哪些loader
                    'style-loader',    //直接使用loader名稱
                    {
                        loader: 'css-loader',
                        options: { //loader傳遞參數
                            
                        }
                    }
                ]
            }
        ],
        noParese: [ //不用解析和處理的模塊
            /special-library\.js$/  // 用正則匹配
        ]
    },
    
    //配置插件
    plugins: [],
    
    //配置尋找模塊的規則
    resolve: {
        modules: [ //尋找模塊的根目錄，array類型，默認以node_modules爲根目錄
            'node_modules',
            path.resolve(__diranme, 'app')
        ],
        extensions: ['.js','.json','.jsx','.css'], //模塊的後綴名
        alias: { //模塊別名配置， 用於映射模塊
            //把module映射new-module， 一樣的'module/path/file'也會被映射到new-module/path/file
            'module': 'new-module',
            //使用結尾符號$後，把'only-module'映射成'new-module'
            //可是不想上面的，'module/path/file',不會被映射成new-module/path/file
            'only-module$': 'new-module'
        },
        alias: [ //alias還支持使用數組來詳細配置
            {
                name: 'modules' //老的模塊
                alias: 'new-module', //新的模塊
                //是不是隻映射模塊，若是是true只有'module'會被映射，若是是 false 'module/inner/path' 也會被映射
                onlyModule: true
            }
        ]，
        symlinks: true, //是否跟隨文件軟連接去搜尋模塊的路徑
        descriptionFile: ['package.json'], //模塊的描述文件
        mainFields: ['main'], 模塊的描述文件裏的描述入口的文件的字段名稱
        enforceExtension: false, //是否強制導入語句必需要寫明文件後綴
    }，
    
    //輸出文件性能檢查配置
    performance: {
        hints: warning, //有性能問題時輸出警告
        hints: 'error', //有性能問題時輸出錯誤
        hints: false, //關閉性能檢查
        maxAssetSize: 200000, //最大文件大小，單位bytes
        maxEntrypointSize: 400000, //最大入口文件大小(單位bytes)
        assetFilter: function(assetFilename) { //過濾要檢查的文件
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
        }
    },
    
    devtool: 'source-map', //配置source-map類型
    
    context: __dirname, //webpack使用的根目錄，string類型必須是絕對路徑
    
    //配置輸出代碼的運行環境
    target: 'web', // 瀏覽器，默認
    target: 'webworker', // WebWorker
    target: 'node', // Node.js，使用 `require` 語句加載 Chunk 代碼
    target: 'async-node', // Node.js，異步加載 Chunk 代碼
    target: 'node-webkit', // nw.js
    target: 'electron-main', // electron, 主線程
    target: 'electron-renderer', // electron, 渲染線程
    
    externals: {    //使用來自JavaScript運行環境提供的所有變量
        jquery: 'jQuery'
    },
    
    stats: { // 控制檯輸出日誌控制
        assets: true,
        colors: true,
        errors: true,
        errorDetails: true,
        hash: true,
      },
      devServer: { // DevServer 相關的配置
    proxy: { // 代理到後端服務接口
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服務器的文件根目錄
    compress: true, // 是否開啓 gzip 壓縮
    historyApiFallback: true, // 是否開發 HTML5 History API 網頁
    hot: true, // 是否開啓模塊熱替換功能
    https: false, // 是否開啓 HTTPS 模式
    },

    profile: true, // 是否捕捉 Webpack 構建的性能信息，用於分析什麼緣由致使構建性能不佳

    cache: false, // 是否啓用緩存提高構建速度

    watch: true, // 是否開始
    watchOptions: { // 監聽模式選項
    // 不監聽的文件或文件夾，支持正則匹配。默認爲空
    ignored: /node_modules/,
    // 監聽到變化發生後會等300ms再去執行動做，防止文件更新太快致使從新編譯頻率過高
    // 默認爲300ms 
    aggregateTimeout: 300,
    // 判斷文件是否發生變化是不停的去詢問系統指定文件有沒有變化，默認每秒問 1000 次
    poll: 1000
  },
}