webpack總體配置結構

摘自《深刻淺出webpack》2.8 const path = require('path'); module.exports = { // entry 表示入口，webpack執行的第一步將從entry開始，可抽象成輸入 // 類型能夠是String，object，array entry: './app/entry', // 只有一個入口，入口只有一個文件 entry: ['./app/entry1','./app/entry1'], // 只有一個入口，入口有兩個文件 entry: {// 有兩個入口 a: './app/entry-a', b: ['./app/entry-b1','./app/entry-b2'], }, // 如何輸出結果：在webpack通過一系列處理後，如何輸出最終想要的代碼 output: { // 輸出文件存放的目錄，必須是string類型的絕對路徑 path: path.resolve(__dirname, 'dist'), // 輸出文件的名稱 filename: 'bundle.js',// 完整的名稱 filename: '[name].js',// 在配置多個entry時，經過名稱模板爲不一樣的entry生成不一樣的文件名稱 filename: '[chunkhash].js', // 根據文件內容的hash值生成文件的名稱，用於瀏覽器長時間緩存文件 // 發佈到線上的全部資源的URL前綴，爲string類型 publicPath: '/assets/', // 放到指定目錄下 publicPath: '', //放到跟目錄下 publicPath: 'http://cdn.example.com/', // 放倒CDN上 // 導出庫的名稱，爲string類型 // 不填它時，默認的輸出格式是匿名的當即執行函數 library: 'MyLibrary', // 導出庫的類型，爲枚舉類型，默認是var // 能夠是umd、umd二、commonjs二、commonjs、amd、this、var、assign、window、global、jsonp 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: { rules: [//配置Loader { test: /.jsx?$/, // 正則匹配命重要使用Loader的文件 include: [// 只會命中這裏面的文件 path.resolve(__dirname, 'app') ], exclude: [// 忽略這裏面的文件 path.resolve(__dirname, 'app/demo-files') ], use: [// 使用哪些Loader，有前後次序，從後向前執行 'style-loader', // 直接使用loader的名稱 { loader: 'css-loader', options: {// 向html-loader傳一些參數 } } ] } ], noParse: [// 不用解析和處理的模塊 /special-library.js$/ //用正則匹配 ], }, // 配置插件 plugins: [ ], //配置尋找模塊的規則 resolve: { modules: [// 尋找模塊的根目錄，爲array類型，默認以node_modules 爲根目錄 'node_modules', path.resolve(__dirname, '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: 'module',// 老模塊 alias: 'new-module', // 新模塊 // 是否只映射模塊，若是是true，則只有'module'會被映射；若是是false，則'module/inner/path'也會被映射 onlyModule: true, } ], symlinks: true, // 是否跟隨文件的軟鏈接去搜尋模塊的路徑 descriptionFiles: ['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: { // 使用來自JasvaScript運行環境提供的全局變量 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 }, }